1.html代码
<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代码
video {object-fit: fill; }
- js代码
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(); // 开始循环播放
