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>

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 个源代码，但是我找不到正确的代码来淡入它。