HTML5视频循环播放方法

创建视频元素

要创建一个视频元素，我们可以使用<video>标签，并将其中的src属性指向我们想要播放的视频文件。

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

JavaScript控制视频播放

我们需要创建一个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();

在视频元素的ended事件中调用JavaScript函数

为了让多个视频无缝循环播放，我们需要在每个视频元素的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视频播放，可以在下方留言或关注我的博客，点赞和分享也是对我最大的支持。感谢观看！

如何在HTML5中使用JavaScript控制视频进行循环播放？

有哪些常见的浏览器安全策略会影响HTML5视频播放？