遵循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>