1.html代码
java
<video id="video1" autoplay loop muted playsinline>
<source src="video1.mp4" type="video/mp4">
</video>
<video id="video2" autoplay loop muted playsinline>
<source src="video2.mp4" type="video/mp4">
</video>
<!-- 其他视频... -->
2.css代码
java
video {
object-fit: fill;
}
- js代码
java
const videos = document.querySelectorAll('video');
let currentVideoIndex = 0;
function playNextVideo() {
const currentVideo = videos[currentVideoIndex];
currentVideo.addEventListener('ended', () => {
currentVideo.style.display = 'none'; // 隐藏当前视频
currentVideoIndex = (currentVideoIndex + 1) % videos.length; // 计算下一个视频的索引
videos[currentVideoIndex].style.display = ''; // 显示下一个视频
videos[currentVideoIndex].play(); // 播放下一个视频
});
}
playNextVideo(); // 开始循环播放