0

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

textarea1 : st=6 et=12

textarea2 : st=15 et=20

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

场景：单击 textarea1。st=6 等=12。在播放时单击 textarea2。条件 video.currentTime > et 为 true 为 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>
4

4 回答 4

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 的静态变量。这样，当用户单击其他文本区域时，它将清除现有间隔以确保它不再干扰。

于 2012-08-20T16:39:17.197 回答
0

使用 clearInterval摆脱旧的间隔！

于 2012-08-20T16:39:03.577 回答
0

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

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

    if (videoEndInterval !== null) {
        clearInterval(videoEndInterval);
    }
    videoEndInterval = setInterval(function() {
        ...
    }, 10);
}
于 2012-08-20T16:39:51.770 回答
0

您的“循环”当前为每个间隔创建一个新间隔，并且您会得到一团糟的间隔。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);
};

您还应该提示您的视频是否未缓冲、不可播放且已暂停（以清除您的间隔）。

另请参阅 Mozilla 开发人员网络上的HTMLVideoElement 接口、HTMLMediaElement 接口、 视频 HTML5 元素和 使用 HTML5 音频和视频。

于 2012-08-20T16:55:08.917 回答