我想要循环播放视频。由于某些原因,我不想在结束事件中更改视频src。因此,我为循环中的每个视频创建了视频元素。同时,我还有视频src和持续时间的数组。
我的想法是: 只有当前正在播放的视频标签可见。其他将被隐藏。 我想使用setTimeout函数来代替ended事件。视频的持续时间将作为延迟参数。
但是它们都同时播放。我无法使它们按顺序播放。
以下是我目前所做的:
videoArray = [
{"video":video1.mp4, "duration": 5},
{"video":video2.mp4, "duration": 7},
{"video":video3.mp4, "duration": 9},
{"video":video4.mp4, "duration": 10},
]
for (var j = 0; j < videoArray.length; j++){
var video = document.createElement("video");
video.src=videoArray[j];
video.id="video-"+j;
video.preload = "metadata";
video.type="video/mp4";
video.autoplay = true;
video.style.display="none";
document.body.appendChild(video);
}
for (var count = 0; count < videoArray.length; count++) {
(function(num){
setTimeout(function() {
videoArray[num].video.style.display="block";
videoArray[num].video.play();
}, 1000 * videoArray[num].duration);
videoArray[num].video.style.display="none";
})(count);
}
timeupdate
、play
和pause
事件监听器,而不是尝试使用setTimeout
。请记住:https://developers.google.com/web/updates/2017/06/play-request-was-interrupted - Alexandre ElshobokshysetTimeout
。再次强调,我不建议采用这种方法,但是它是可行的。 - Shahar