如何解决html5视频一一播放
我在播放多个 html5 视频时遇到了一点问题。所以,有4个视频一一播放。第一轮播放(从 video0 到 video3)没问题,但是当它从头开始播放时,在改变每个视频时会出现明显的抽搐。 我将非常感谢您的帮助!
var vidElement0 = document.getElementById('video0');
var vidElement1 = document.getElementById('video1');
var vidElement2 = document.getElementById('video2');
var vidElement3 = document.getElementById('video3');
var vidSource0 = "http://mediapark.pl/projekty/kolebka/wp-content/themes/kolebka/video/1.mp4";
var vidSource1 = "http://mediapark.pl/projekty/kolebka/wp-content/themes/kolebka/video/2.mp4";
var vidSource2 = "http://mediapark.pl/projekty/kolebka/wp-content/themes/kolebka/video/3.mp4";
var vidSource3 = "http://mediapark.pl/projekty/kolebka/wp-content/themes/kolebka/video/4.mp4";
vidElement0.src = vidSource0;
vidElement1.src = vidSource1;
vidElement2.src = vidSource2;
vidElement3.src = vidSource3;
var vidSource0 = document.getElementById("video0");
vidSource0.style.display = "block";
vidElement0.classList.add("vid-0");
vidElement0.addEventListener('ended',function(e) {
vidElement1.play();
vidElement0.style.removeProperty('display');
vidElement1.style.display = "block";
vidElement0.classList.remove("vid-0");
vidElement1.classList.add("vid-1");
});
vidElement1.addEventListener('ended',function(e) {
vidElement2.play();
vidElement1.style.removeProperty('display');
vidElement2.style.display = "block";
vidElement1.classList.remove("vid-1");
vidElement2.classList.add("vid-2");
});
vidElement2.addEventListener('ended',function(e) {
vidElement3.play();
vidElement2.style.removeProperty('display');
vidElement3.style.display = "block";
vidElement2.classList.remove("vid-2");
vidElement3.classList.add("vid-3");
});
vidElement3.addEventListener('ended',function(e) {
vidElement0.play();
vidElement3.style.removeProperty('display');
vidElement0.style.display = "block";
vidElement3.classList.remove("vid-3");
vidElement0.classList.add("vid-0");
});
video {
width: 100%;
left: 0;
right: 0;
position: absolute;
bottom: 0;
z-index: -1;
top: 0;
object-fit: cover;
height: 100%;
display: none;
transition: all 0.1s ease;
}
<video src="" id="video0" class="" preload autoplay muted playsinline></video>
<video src="" id="video1" class="" preload autoplay muted playsinline></video>
<video src="" id="video2" class="" preload autoplay muted playsinline></video>
<video src="" id="video3" class="" preload autoplay muted playsinline></video>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。