Javascript 使用setTimeout在循环中播放视频

我想循环播放视频。由于某些原因，我不想在结束事件时更改视频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);
}

videoArray=[
{“视频”：video1.mp4，“持续时间”：5}，
{“视频”：video2.mp4，“持续时间”：7}，
{“视频”：video3.mp4，“持续时间”：9}，
{“视频”：video4.mp4，“持续时间”：10}，
]
对于（var j=0；j

您可以将视频的持续时间保存在一个变量中，然后将此变量与以前的视频持续时间累加，并将其设置为setTimeOut duration

请注意，视频的时间以秒为单位。对于第一个要播放的视频，用户必须进行交互，否则视频将无法播放

工作示例：

功能启动视频（事件）{
event.target.style.display=“无”；
（功能（）{
视频阵列=[
{
视频：
"http://techslides.com/demos/sample-videos/small.mp4",
持续时间：5
},
{
视频：
"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
持续时间：60
},
{
视频：
"https://mobamotion.mobatek.net/samples/sample-mp4-video.mp4",
持续时间：120
},
{
视频：
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
持续时间：600
}
];
设vidararayelem=[]；
对于（var j=0；j

视频{
高度：100px；
宽度：100px；
显示：内联块；
保证金：4倍；
浮动：左；
}

---

开始视频演示

除了您试图实现一些奇怪的东西，而且您的代码示例无法编译之外。在我看来，你做到了。 唯一缺少的是

pause（）

和

display=“none”

。通过最少的编辑，您就拥有了所需的内容

const videoArray=[
{“video”：“video1.mp4”，“duration”：5}，//当然你需要”
{“video”：“video2.mp4”，“duration”：7}，
{“video”：“video3.mp4”，“duration”：9}，
{“video”：“video4.mp4”，“duration”：10}，
]
for（设j=0；j

但是有很多缺陷：

setTimeout

不关心网络延迟和其他与时间相关的问题，因此您的视频序列很可能无法无缝播放

由于第一个流，并且由于我怀疑

持续时间

值是否准确，您应该使用

pause（）

正如@IslamElshobokshy在对您的问题的评论中所指出的那样，使用

播放/暂停

并不是那么简单