javascript-在视频中跳转到数组中的时间

遵循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();  }

});

}

解决方法:

您需要将数组中的值更改为整数,而不是字符串-您未将Apple与Apple进行比较.

下面的更新的,经过简化的示例将一直播放(最初是从视频开头开始),直到时间戳达到当前标记加上5秒钟,然后跳转到下一个标记(并循环播放).

它不能满足用户自己整理视频的需求(尽管视频会在当前部分开始超过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>

原文地址：https://codeday.me/bug/20191012/1897110.html