Javascript 播放和暂停视频的功能

Question

我正在尝试通过包含开始时间和结束时间的可点击播放按钮在特定时间点开始和暂停 html5 视频：

function videostart(id,start,end){

  var video = document.getElementsByTagName("video")[0];
  video.currentTime = start;
  video.play();

  video.addEventListener("timeupdate", function() {
  if (video.currentTime >= end) {
  video.pause();
  }}, false);

};

第一次调用工作正常，它从 0 开始播放并在 2:24 结束。

<a href="#" onclick="videostart('1759',0.00,2.24); return false;">PLAY</a>

但是，第二个呼叫开始播放然后立即停止：

<a href="#" onclick="videostart('1760',2.25,7.24); return false;">PLAY</a>

如果我先点击第一个 link，它可以正常播放并从 0 播放到 2.24。

如果我首先点击第二个 link，它播放正常，停止也正常。

但是，如果我先点击第一个 link 然后点击第二个 link，它开始播放然后立即退出。

到时候我可以回去播放第一个link，想玩多少次都没有问题。

Answer 1

`.addEventListener()` & `.removeEventListener()`

首先避免使用单一事件属性处理程序：

<button ~~onclick="fnc()"~~>

您需要删除 timeupdate 事件处理程序，因为它会不断更新初始 end 值。这意味着需要 .addEventListener() 和 .removeEventListener()。

演示

详情在演示中评论

/*
Register the document to the click event
When it's clicked, call function videoStart()
*/
document.addEventListener('click', videoStart);
// Declare variable
var END;
// Define function videoStart() -- pass Event Object
function videoStart(event) {
  // Reference the clicked button
  var button = event.target;
  // Get data-start value of clicked button
  var start = button.dataset.start;
  // Get data-end value of clicked button
  var end = button.dataset.end;
  // Assign value of end to END
  END = end;
  // Reference the video tag
  var video = document.querySelector("video");
  // Set time to start value
  video.currentTime = start;
  // Play video
  video.play();
  /* 
  Register video tag to timeupdate event 
  videoEnd() is the callback function
  */
  video.addEventListener("timeupdate", videoEnd);
};

// Define function videoEnd() -- pass the Event Object
function videoEnd(event) {
  // Reference the video tag
  var video = document.querySelector("video");
  /*
  if the current time is greater than or equal to END...
  pause video and remove the eventListener() so the next
  eventListener can be established according to new END
  argument.
  */
  if (video.currentTime >= END) {
    video.pause();
    video.removeEventListener("timeupdate", videoEnd);
  }
}

<video src='https://html5demos.com/assets/dizzy.mp4' width='320'></video>
<button data-start='0' data-end='3'>0 - 3</button>

<button data-start='3' data-end='5'>3 - 5</button>

Javascript 播放和暂停视频的功能

Javascript function to play and pause video

javascript

html5-video

`.addEventListener()` & `.removeEventListener()`

演示

Javascript 播放和暂停视频的功能

Javascript function to play and pause video

javascript

html5-video

.addEventListener() & .removeEventListener()

演示

`.addEventListener()` & `.removeEventListener()`