在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); 

可以在這里實時查看 。

我沒有添加任何內容以使其在達到特定時間時停止，因為此當前腳本根本沒有執行。 任何幫助將不勝感激！

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);
});