Javascript function to play and pause video

问题: I am trying to start and pause an html5 video at certain points via a clickable play button that includes the start time and end time: function videostart(id,start,end){...

问题:

I am trying to start and pause an html5 video at certain points via a clickable play button that includes the start time and end time:

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

};

This first call works fine and it starts playing at 0 and ends at 2:24.

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

However, this second call starts to play and then immediately stops:

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

If I click the first link first, it works fine and plays from 0 to 2.24.

If I click the second link FIRST, it plays fine and stops fine as well.

However, if I click the first link FIRST and THEN click the second link, it starts to play and then quits immediately.

I can, at that point go back and play the first link as many times as I wish without issue.


回答1:

.addEventListener() & .removeEventListener()

First of all avoid using onevent attribute handlers:

<button onclick="fnc()">

You'll need to remove the timeupdate event handler because it'll continually update on whatever was the initial end value. That means .addEventListener() and .removeEventListener() is needed.

Demo

Details are commented in demo

/*
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>

  • 发表于 2019-03-17 06:52
  • 阅读 ( 97 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除