javascript - 如何使用 javascript 缓冲/预加载 html5 视频

Question

我正在运行以下代码，它在每个视频的末尾更改 html5 视频的来源，以便它不断地播放一个接一个的视频。第一个视频结束后，它会运行第二个，然后是第三个，最后从头开始，从而导致无限循环。它还选择一个随机起点，但这对我的问题并不重要。

在下面的代码中，您只会找到两个视频源，但最终代码将使用大约十个。

我的问题是在一个视频的结尾和下一个视频的开头之间有一个小的停顿。我将视频标签的背景色设为红色，这样您就可以在每个视频播放之间看到红色闪光。

我猜这可以通过预加载在 javascript 代码中指定的所有视频来解决。所以我想要实现的是在当前视频播放时仅预加载 javascript 代码内指定列表中的下一个视频。所以当视频 nr。 5 正在播放，它应该预加载视频 nr。 6等..

或者这不是可以通过有效缓冲/预加载来解决的问题吗？我也很高兴有任何其他建议..

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 容器中，如下所示:

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

    //loadedmetadata is wrong because if we use it then we get endless loop
    videoEl.onplaying = function(e)
    {
        if(++nextActiveVideo == 2)
            nextActiveVideo = 0;

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

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

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

var videoContainer = document.getElementById('videoContainer'),
    nextActiveVideo = 0,
    nextVideoElement,
    videoElements =
    [
        document.createElement('video'),
        document.createElement('video')
    ],
    vidSources =
    [
        "http://www.w3schools.com/html/mov_bbb.mp4",
        "http://www.w3schools.com/html/movie.mp4"
    ];

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

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

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

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

video{background-color: red}

<div id="videoContainer"></div>