video 实现切换视频

在网页或应用程序中实现视频的切换通常涉及到HTML5的`<video>`元素以及JavaScript。以下是基本步骤：

1. **设置`<video>`标签**：在HTML中创建一个或多个`<video>`元素，每个元素对应一个视频资源，比如`<video src="video1.mp4" controls></video>`。

2. **添加播放按钮或事件监听**：通过JavaScript为这些视频元素添加交互元素，例如点击按钮时改变当前显示的视频。可以使用`addEventListener`方法监听事件，如`click`事件。

const videos = document.querySelectorAll('video');
let currentVideoIndex = 0;

function switchVideo(index) {
   videos[currentVideoIndex].pause();
   if (index >= 0 && index < videos.length) {
      currentVideoIndex = index;
      videos[currentVideoIndex].play();
   }
}

// 点击切换按钮的示例
const switchButton = document.getElementById('switch-video-button');
switchButton.addEventListener('click', function() {
   switchVideo(currentVideoIndex === videos.length - 1 ? 0 : currentVideoIndex + 1);
});

3. **处理视频源的动态加载**：如果视频的数量是动态生成的，可以在切换时动态添加或删除`<video>`元素，并更新相应的索引。

4. **考虑兼容性**：为了支持不同浏览器对HTML5 Video的兼容性，可能需要使用`canPlayType`方法检查特定浏览器是否支持某个视频格式。