javascript - HTML5 视频 - 如何无缝播放多个视频然后循环播放序列？

Question

我知道以前有人问过类似的问题，但没有人能够解决这个具体问题，他们只解决了部分问题。

我想实现以下目标:

1. 我们有很多视频。我们称他们为video1 , video2 , video3 , video4和 video5 .
2. 视频按顺序播放，无限循环播放 - 所以在 video1 之后完成了，video2播放，然后 video3 , video4 , video5然后它再次从 video1 开始.
3. 起点必须是随机的。所以整个序列应该从列表中随机选择的视频开始，然后按正常顺序遍历列表的其余部分。如果它随机选择以 video3 开头, 然后它会继续播放 video4 , video5 , video1 , video2等
4. 序列的播放必须自动开始，无需任何用户输入。
5. 现在最后一点是最困难的一点:每个视频的播放之间不能有间隙。

我已经能够编写代码来完成从第 1 点到第 4 点的所有操作，但我无法用它来解决第 5 点!

这是我的代码。我已经设置了 background-color视频到red使视频之间的间隙可见 - 您将能够在每个视频的播放之间看到红色闪光。这就是我需要解决的问题:我需要消除瞬间间隙，以便播放绝对无缝。

var vidElement = document.getElementById('video');
    var vidSources = [
      "http://www.w3schools.com/html/mov_bbb.mp4",
      "http://www.w3schools.com/html/movie.mp4"
      ];
    var activeVideo = Math.floor((Math.random() * vidSources.length));
    vidElement.src = vidSources[activeVideo];
    vidElement.addEventListener('ended', function(e) {
      // update the active video index
      activeVideo = (++activeVideo) % vidSources.length;
      if(activeVideo === vidSources.length){
        activeVideo = 0;
      }

      // update the video source and play
      vidElement.src = vidSources[activeVideo];
      vidElement.play();
    });

video { background-color: red }

<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="video" autoplay muted playsinline></video>
<p>(each video is just ~ 10 seconds)</p>

Answer 1

您可以创建两个带有 preload 属性的 video 元素并将其添加到 div 容器中。然后我们可以通过切换显示状态来切换视频，如下所示:

var videoContainer = document.getElementById('videoContainer'),
    output = document.getElementById('output'),
    nextVideo,
    videoObjects =
    [
        document.createElement('video'),
        document.createElement('video')
    ],
    vidSources =
    [
        "http://www.w3schools.com/html/mov_bbb.mp4",
        "http://www.w3schools.com/html/movie.mp4",
        "http://www.w3schools.com/html/mov_bbb.mp4",
        "http://www.w3schools.com/html/movie.mp4",
        "http://www.w3schools.com/html/mov_bbb.mp4",
        "http://www.w3schools.com/html/movie.mp4"
        //this list could be additionally filled without any other changing from code
    ],
    //random starting point
    nextActiveVideo = Math.floor((Math.random() * vidSources.length));

videoObjects[0].inx = 0; //set index
videoObjects[1].inx = 1;

initVideoElement(videoObjects[0]);
initVideoElement(videoObjects[1]);

videoObjects[0].autoplay = true;
videoObjects[0].src = vidSources[nextActiveVideo];
videoContainer.appendChild(videoObjects[0]);

videoObjects[1].style.display = 'none';
videoContainer.appendChild(videoObjects[1]);

function initVideoElement(video)
{
    video.playsinline = true;
    video.muted = false;
    video.preload = 'auto'; //but do not set autoplay, because it deletes preload

    //loadedmetadata is wrong because if we use it then we get endless loop
    video.onplaying = function(e)
    {
        output.innerHTML = 'Current video source index: ' + nextActiveVideo;

        //select next index. If is equal vidSources.length then it is 0
        nextActiveVideo = ++nextActiveVideo % vidSources.length;

        //replace the video elements against each other:
        if(this.inx == 0)
            nextVideo = videoObjects[1];
        else
            nextVideo = videoObjects[0];

        nextVideo.src = vidSources[nextActiveVideo];
        nextVideo.pause();
    };

    video.onended = function(e)
    {
        this.style.display = 'none';
        nextVideo.style.display = 'block';
        nextVideo.play();
    };
}

video{background-color: red}

<div id="videoContainer" style="display:inline-block"></div>
<b id="output" style="vertical-align:top"></b>