2

沿着HTML5 video 中的 Control start position 和 duration of play，我试图让视频在每个片段播放完毕后自动从一个片段跳到下一个片段。每个段将具有相同的持续时间，并且每个段的开始时间将在一个数组中。

我似乎无法弄清楚如何在 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();  }

});

}
4

1 回答 1

2

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

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

它不适合用户自己擦洗视频（尽管它会在他们超过当前部分开始 5 秒后立即捕获，但返回会有点混淆） - 如果你想在这 5 秒内控制边界，您需要对时间戳与数组进行更智能的检查，以确保您处于应有的位置

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

<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>
于 2013-05-10T02:59:50.393 回答