[英]HTML5 Video - How to seamlessly play several videos and then loop the sequence?
I know that similar questions have been asked before but none has been able to solve this specific problem, they only solve parts of it.我知道以前有人问过类似的问题,但没有人能够解决这个特定问题,他们只能解决部分问题。
I want to achieve the following:我想实现以下目标:
video1
, video2
, video3
, video4
and video5
.video1
、 video2
、 video3
、 video4
和video5
。video1
is finished, video2
is played, then video3
, video4
, video5
and then it starts again from video1
.video1
结束后, video2
播放,然后video3
, video4
, video5
然后再次开始video1
。video3
, it would then go on to play video4
, video5
, video1
, video2
etc.video3
开始,它将继续播放video4
、 video5
、 video1
、 video2
等。 I have been able to write a code that does everything from the point 1 to 4 but I can not get it to solve point 5!我已经能够编写一个代码来完成从第 1 点到第 4 点的所有操作,但我无法解决第 5 点!
Here is my code.这是我的代码。 I have set the
background-color
of the video to red
to make the gap between the videos visible - you will be able to see a red flash between the playback of each video.我已将视频的
background-color
设置为red
以使视频之间的间隙可见 - 您将能够在每个视频的播放之间看到红色闪光。 This is what I need to solve: I need that split second gap to be gone, so that the playback will be absolutely seamless.这就是我需要解决的问题:我需要消除那一秒的差距,以便播放绝对无缝。
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>
You can create two video
elements with preload
attribute and add it to div containar.您可以使用
preload
属性创建两个video
元素并将其添加到 div 容器中。 Then we can switch between the videos by toggling the display state like follows:然后我们可以通过切换显示状态来在视频之间切换,如下所示:
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>
Try with setting the display to block and none:尝试将显示设置为阻止和无:
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>
EDIT : I have edited the sources, made it 5 sources, but I couldn't find the correct code to fade it in.编辑:我已经编辑了源代码,将其设为 5 个源代码,但是我找不到正确的代码来淡入它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.