添加事件侦听器以在 HTML5 视频中播放、暂停和跳到秒

Question

我有一个 HTML5 视频，用于展示产品的工作原理。当点击一个数字的每个图像时，我希望它跳到视频中的某个时间，然后在某个时间停止。

这是我目前正在使用但无法正常工作的代码：

<img id="stepOne" src="http://9e9.921.myftpupload.com/wp-content/uploads/2016/10/Step-1.png" /><img id="stepTwo" src="http://9e9.921.myftpupload.com/wp-content/uploads/2016/10/Step-2.png" /><img id="stepThree" src="http://9e9.921.myftpupload.com/wp-content/uploads/2016/10/Step-3.png" />

<video id="myvideo" width="300" height="150">
<source src="/videos/howitworks.mp4" type="video/mp4" />
<source src="/videos/howitworks.webm" type="video/webm=" />
Your browser does not support HTML5 video.</video>

随着Javascript

var myvideo = document.getElementById('myvideo')
var stepone = document.getElementById('stepOne')
var steptwo = document.getElementById('stepTwo')
var stepthree = document.getElementById('stepThree')

stepone.addEventListener("click", function (event) {
    event.preventDefault();
    myvideo.play();
    myvideo.pause();
    myvideo.currentTime = 0;
    myvideo.play();
}, false);


steptwo.addEventListener("click", function(event) {
    event.preventDefault();
    myvideo.play();
    myvideo.pause();
    myvideo.currentTime = 10;
    myvideo.play();
}, false);


stepthree.addEventListener("click", function(event) {
    event.preventDefault();
    myvideo.play();
    myvideo.pause();
    myvideo.currentTime = 32;
    myvideo.play();
}, false);

可以直播here.

我没有添加任何东西让它在到达特定时间时停止，因为当前脚本根本没有执行。任何帮助将不胜感激！

Answer 1

当我访问你的页面时，我看到错误 Uncaught TypeError: Cannot read property 'addEventListener' of null，所以这可能是你的问题:)

脚本可能运行在元素准备好之前。尝试将该代码包装在 document.addEventListener("DOMContentLoaded", function(event) { 中，看看是否能解决问题？

所以

document.addEventListener("DOMContentLoaded", function(event) { 
  var myvideo = document.getElementById('myvideo')
  var stepone = document.getElementById('stepOne')
  var steptwo = document.getElementById('stepTwo')
  var stepthree = document.getElementById('stepThree')

  stepone.addEventListener("click", function (event) {
      event.preventDefault();
      myvideo.play();
      myvideo.pause();
      myvideo.currentTime = 0;
      myvideo.play();
  }, false);


  steptwo.addEventListener("click", function(event) {
      event.preventDefault();
      myvideo.play();
      myvideo.pause();
      myvideo.currentTime = 10;
      myvideo.play();
  }, false);


  stepthree.addEventListener("click", function(event) {
      event.preventDefault();
      myvideo.play();
      myvideo.pause();
      myvideo.currentTime = 32;
      myvideo.play();
  }, false);
});

添加事件侦听器以在 HTML5 视频中播放、暂停和跳到秒

Adding Event Listeners to Play, Pause, and Skip to Seconds in HTML5 Video

html

javascript

video

addeventlistener