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

HTML,CSS,andJavaScript实现视频循环播放

最新推荐文章于 2024-10-16 11:29:44 发布

原创最新推荐文章于 2024-10-16 11:29:44 发布 · 776 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #css

本文介绍了如何使用HTML标签定义视频源，CSS设置视频填充方式，以及JavaScript编写脚本来实现自动播放、循环播放和视频切换功能的示例。

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