HTML5 Video - Как легко воспроизвести несколько видео, а затем зациклить последовательность?

Question

Я знаю, что подобные вопросы задавались ранее, но никто не смог решить эту конкретную проблему, они только решают ее часть.

Я хочу добиться следующего:

1. У нас есть несколько видео.Давайте назовем их video1, video2, video3, video4 и video5.
2. Видео воспроизводится в упорядоченной последовательности, которая повторяется в бесконечном цикле - поэтому после video1закончено, video2 воспроизводится, затем video3, video4, video5 и затем начинается снова с video1.
3. Начальная точка должна быть случайной.Таким образом, вся эта последовательность должна начинаться со случайно выбранного видео в списке, а затем проходить по остальной части списка в обычном порядке.Если он случайным образом выберет начало с video3, он продолжит воспроизведение video4, video5, video1, video2 и т. Д.
4. Воспроизведение последовательности должно начаться автоматическибез какого-либо пользовательского ввода.
5. Теперь этот последний пункт является наиболее сложным: между воспроизведением каждого видео не должно быть промежутка.

Я смог написать кодчто делает все из пунктов Nr.От 1 до nr.4 но я не могу получить его, чтобы решить Nr.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

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

Answer 2

Попробуйте установить на дисплее блокировку и отключить ее:

var vidElement0 = document.getElementById('video0');
var vidElement1 = document.getElementById('video1');
var vidElement2 = document.getElementById('video2');
var vidElement3 = document.getElementById('video3');
var vidElement4 = document.getElementById('video4');

    var vidSource0 = "http://www.w3schools.com/html/mov_bbb.mp4";
    var vidSource1 = "http://www.w3schools.com/html/movie.mp4";
    var vidSource2 = "http://www.w3schools.com/html/mov_bbb.mp4";
    var vidSource3 = "http://www.w3schools.com/html/movie.mp4";
    var vidSource4 = "http://www.w3schools.com/html/mov_bbb.mp4";
    
    vidElement0.src = vidSource0;
    vidElement1.src = vidSource1;
    vidElement2.src = vidSource2;
    vidElement3.src = vidSource3;
    vidElement4.src = vidSource4;

    var rand = Math.floor((Math.random() * 5 )); //5 = length of vidsources (Start counting from 0)
    
    var vidRandom = document.getElementById("video" + rand);
    console.log("Video "+rand+ " will be displayed first.");
    
    vidRandom.style.display = "block";
   

   
    vidElement0.addEventListener('ended', function(e) {
    vidElement1.play();
   
    vidElement0.style.display = "none";
     vidElement1.style.display = "block";
});

    vidElement1.addEventListener('ended', function(e) {
    vidElement2.play();
    
    vidElement1.style.display = "none";
    vidElement2.style.display = "block";
  });
  
    vidElement2.addEventListener('ended', function(e) {
    vidElement3.play();
    
    vidElement2.style.display = "none";
    vidElement3.style.display = "block";
  });
  
    vidElement3.addEventListener('ended', function(e) {
    vidElement4.play();
    
    vidElement3.style.display = "none";
    vidElement4.style.display = "block";
  });
  
    vidElement4.addEventListener('ended', function(e) {
    vidElement0.play();
    
    vidElement4.style.display = "none";
    vidElement0.style.display = "block";
  });

video {background-color: red; height: 200px; width: 300px;display: none; }

<video src="" id="video0"  preload autoplay muted playsinline></video>
<video src="" id="video1"  preload autoplay muted playsinline></video>
<video src="" id="video2"  preload autoplay muted playsinline></video>
<video src="" id="video3"  preload autoplay muted playsinline></video>
<video src="" id="video4"  preload autoplay muted playsinline></video>

РЕДАКТИРОВАТЬ : я отредактировал источники, сделал 5 источников, но не смог найти правильный код дляисчезать.