HTML HTML5视频播放 – 如何无缝循环播放多个视频

在HTML5中，我们可以使用<video>标签来播放视频，HTML5本身并没有提供循环播放的功能，我们需要通过JavaScript来实现这个功能，以下是如何无缝循环播放多个视频的详细步骤：

1、我们需要在HTML中创建视频元素，每个视频元素都应该有一个唯一的ID，这样我们就可以通过JavaScript来控制它们。

<video id="video1" src="video1.mp4"></video>
<video id="video2" src="video2.mp4"></video>
<video id="video3" src="video3.mp4"></video>

2、我们需要创建一个JavaScript函数来控制视频的播放，在这个函数中，我们首先会获取所有的视频元素，然后遍历这些元素，对每个元素进行操作，具体来说，我们会先停止当前正在播放的视频，然后设置下一个视频的播放时间，最后调用play()方法来开始播放下一个视频，这个过程会在每个视频播放完毕后自动重复，从而实现无缝循环播放的效果。

var videos = ['video1', 'video2', 'video3']; // 这是视频元素的ID列表
var currentVideoIndex = 0; // 这是当前正在播放的视频的索引
function loopVideos() {
    // 获取所有的视频元素
    var videoElements = document.querySelectorAll('video');
    // 停止当前正在播放的视频
    for (var i = 0; i < videoElements.length; i++) {
        if (videoElements[i].id === videos[currentVideoIndex]) {
            videoElements[i].pause();
        }
    }
    // 设置下一个视频的播放时间
    videos[currentVideoIndex].currentTime = 0;
    // 开始播放下一个视频
    videos[currentVideoIndex].play();
    // 更新当前正在播放的视频的索引
    currentVideoIndex = (currentVideoIndex + 1) % videos.length;
}
// 开始循环播放视频
loopVideos();

3、我们需要在每个视频元素的ended事件中调用loopVideos()函数，这样，当一个视频播放完毕后，就会自动开始播放下一个视频。

<video id="video1" src="video1.mp4" onended="loopVideos()"></video>
<video id="video2" src="video2.mp4" onended="loopVideos()"></video>
<video id="video3" src="video3.mp4" onended="loopVideos()"></video>

以上就是如何在HTML5中无缝循环播放多个视频的方法，需要注意的是，这种方法只适用于同源的视频文件，如果你的视频文件来自不同的源，浏览器可能会阻止你自动播放它们，由于浏览器的安全策略，你可能需要在服务器环境中运行你的网页才能看到效果。