Question

沿着Control start position and duration of play in HTML5 video的行，我试图在每个片段完成播放后自动从一个片段跳到下一个片段。每个段的持续时间相同，每个段的开始时间将在一个数组中。

我似乎无法弄清楚如何在addEventListener之后遍历数组。

var video = document.getElementById('player1');


function settheVariables() {

var videoStartTime= ["4","15","26","39"];

for (var i = 0; i < videoStartTime.length; i++) {

if (video.currentTime < videoStartTime[0] ){
      video.currentTime = videoStartTime[i];
}
durationTime = 5;

}



//This part works when I plug in numbers for videoStartTime.

video.addEventListener('timeupdate', function() {

    if(this.currentTime > (// videoStartTime [current index] + durationTime)){

    this.currentTime = (// videoStartTime with next index);
    video.play();  }

});

}

Answer 1

你需要将数组中的值更改为整数，而不是字符串 - 你不是要比较苹果和苹果。

下面更新且稍微简化的示例（最初从视频开始）直到时间戳到达当前标记加上五秒然后跳到下一个标记（并循环回来）。

它不能满足用户自己擦洗视频的要求（尽管它会在当前部分开始后超过5秒后陷阱，但回去会使事情有点混乱） - 如果你想要在这些5s范围内控制你会想要对时间戳与数组做一些更聪明的检查，以确保你应该在你应该的位置

无论如何......代码：

<script>
var video = document.getElementById('player1');

var videoStartTime= [4,15,26,39];
durationTime = 5;
currentIndex=0;

video.addEventListener('timeupdate', function() {
//  console.log(this.currentTime);

    if (this.currentTime > (videoStartTime[currentIndex] + durationTime))
    {
        currentIndex = (currentIndex + 1) % videoStartTime.length // this just loops us back around
    this.currentTime = videoStartTime[currentIndex];
//    video.play(); // don't need this if the video is already playing
 }

});

</script>

在视频中跳转到阵列中的时间

1 个答案: