html js css如何使循环混播放视频时视频切换很平滑的过渡

曦月合一2024-03-25 12:20

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(); // 开始循环播放