Question

我有一些时间存储<video>元素的暂停时间：

var pauseTimes = [0, 5, 12, 15];

我希望有一个循环功能，在0秒开始视频， puases 在5秒，然后向<div>添加内容。然后我希望该功能在5秒时开始视频，并在12秒时暂停并向<div>添加内容。依此类推。

我有这个功能，从0秒到5秒，然后从5秒到12秒（等等你得到的图片）：

  var b = 0;
  var vid = document.getElementById("video");
  function loopThrough () {
    vid.currentTime = pauseTimes[b];
    vid.play();
    vid.addEventListener("timeupdate", function(){
      if(this.currentTime >= pauseTimes[b]) {
        this.pause();
      }
    }, false);
    b++;
  }

但是我不知道如何连续循环遍历数组（即从0到5,5到12,12到15）以及在暂停和向div添加内容之间。

到目前为止，我正在使用for循环：

  var m = 0;
  function loopContinuously() {
    for (m = 0; m < pauseTimes.length-1; m++) {
      loopThrough();
      // Adding stuff to the div here
      m++;
    }
  }

它做了我想做的事情，但它在整个时间间隔内快速跳过。有没有办法在指定的时间间隔（在数组中）实际浏览视频并将内容添加到<div>？

Answer 1

要在时间间隔之间创建一些延迟，您可以尝试使用setTimeout并在“timeupdate”事件中增加变量b。

也许这样的设置可以帮到你：

视频开始播放0
在5秒内暂停setTimeout函数中给出的毫秒数，然后继续为12
在setTimeout函数中给出毫秒的12秒暂停，然后继续到15
在15秒内暂停setTimeout函数中给出的毫秒，然后从0开始播放

例如：

var pauseTimes = [0, 5, 12, 15];
var b = 0;
var vid = document.getElementById("video");

vid.addEventListener("timeupdate", function () {
    if (this.currentTime >= pauseTimes[b]) {
        vid.pause();
        // Adding stuff to the div here
        b++;

        setTimeout(function () {
            if (b === pauseTimes.length) {
                // reset b
                b = 0;
                // reset the video
                vid.currentTime = 0;
                vid.load();
            } else {
                vid.play();
            }
        }, 1000);
    }
}, false);

vid.currentTime = pauseTimes[b++];
vid.play();

循环播放HTML 5 <video>

1 个答案: