Как буферизировать / предварительно загружать видео html5, используя JavaScript

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

Вы можете создать video элементы с атрибутом preload и добавить их в 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>