Question

我想播放视频的一部分（html5）并在2个textareas的“onclick”上循环播放这些部分。我将starttime（st）和endtime（et）传递给javascript函数。

textarea1：st = 6 et = 12

textarea2：st = 15 et = 20

我正在使用setinterval检查结束时间并再次调用方法来循环。

场景：单击textarea1。 st = 6 et = 12。正在播放时点击textarea2。条件video.currentTime＆gt;等于15> 12这是错误的结果。 et值在“onclick”上没有变化。请帮忙。

这是我的代码：

function playVideo(st,et) {
   var video = document.getElementById('player');
   video.currentTime = st;
   video.play();
   int = setInterval(function() {
      if (video.currentTime > et) { // here the et still has the previous value 
          playVideo(st,et); // loop             
      }
   }, 10);
}

<video width="320" height="240" controls="controls" id="player">
   <source src="abc.mp4" type="video/mp4" />
</video>
<textarea onclick="playVideo(6,12)" >Part1 </textarea>
<textarea onclick="playVideo(15,20)">Part2</textarea>

Answer 1

并不是et具有之前的值，而是你永远不会摆脱旧的间隔。

不再是再次致电playVideo，而只是打电话给video.currentTime = st;会更好。但是，请记住，您需要停止间隔的某事。就个人而言，我会做这样的事情：

function playVideo(st,et) {
    var video = document.getElementById('player');
    clearInterval(arguments.callee.interval);
    video.currentTime = st;
    video.play();
    arguments.callee.interval = setInterval(function() {
        if( video.currentTime > et) video.currentTime = st;
    },10);
}

我将间隔保存为函数的属性，本质上JS与静态变量等效。这样，当用户点击另一个textarea时，它将清除现有的间隔，以确保它不再干扰。

Answer 2

通过使用clearInterval来

Get rid旧间隔！

Answer 3

您的问题可能是您没有清除间隔回调。尝试检查之前（但仍处于活动状态）的间隔，并在分配新间隔之前将其清除。

var videoEndInterval = null;
function playVideo(st, et) {
    ...

    if (videoEndInterval !== null) {
        clearInterval(videoEndInterval);
    }
    videoEndInterval = setInterval(function() {
        ...
    }, 10);
}

Answer 4

你的'循环'当前会创建一个新的间隔，每隔一段时间，你会得到一堆混乱的间隔。 setInterval每隔x ms执行一次，其中setTimeout在x ms后执行一次。停止视频时，您需要清除间隔。

试试这个：

// var declared outside, to clear an old interval,
// but also to not have a global variable.
var stopInterval; 

var playVideo = function (st, et) {
   var video = document.getElementById('player');
   video.currentTime = st;
   video.play();

   if (stopInterval) {
     // clear an old interval, if playVideo is called twice
     window.clearInterval(stopInterval);
     stopInterval = 0;
   }

   stopInterval = window.setInterval(function() {
      if (video.currentTime > et) {
          // here your video is after et, so clear the interval and stop.
          window.clearInterval(stopInterval);
          stopInterval = 0;
          video.pause();
      }
   }, 10);
};

您还应提示您的视频是否未缓冲，无法播放和暂停（以清除间隔）。

另见 HTMLVideoElement Interface，HTMLMediaElement Interface， video HTML5 element，和 {0}在Mozilla的开发者网络上。

setinterval函数使用变量的previous / old值

4 个答案: