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

在本文中，我们将介绍如何使用HTML5视频元素实现无缝循环播放多个视频的方法。

阅读更多：HTML 教程

1. 使用HTML5视频元素

HTML5为Web开发者提供了一个强大的视频播放工具：video元素。它允许我们在网页上嵌入并播放视频，同时具备各种控制选项和事件监听功能。

<video id="myVideo" controls>
  <source src="video1.mp4" type="video/mp4">
  <source src="video1.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

上面的示例代码演示了如何使用video元素嵌入视频，并为其提供了两个不同格式的视频源。如果浏览器支持其中一种格式，就会显示该视频，否则会显示后备内容。

2. 循环播放单个视频

要实现单个视频的循环播放，我们可以使用video元素的loop属性。将loop设置为true，视频将在结束后自动重新开始播放。

<video id="myVideo" loop controls>
  <source src="video1.mp4" type="video/mp4">
  <source src="video1.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

在上面的示例代码中，我们为video元素添加了loop属性，以实现视频的无限循环播放。

3. 连续播放多个视频

要实现多个视频的连续播放，我们需要使用JavaScript来监听视频播放结束事件，并在事件触发后加载下一个视频。

<video id="myVideo" controls>
    <source src="video1.mp4" type="video/mp4">
    <source src="video1.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

<script>
    var video = document.getElementById("myVideo");
    var videos = ["video1.mp4", "video2.mp4", "video3.mp4"];
    var index = 0;

    video.addEventListener("ended", function() {
        index++;
        if (index == videos.length) {
            index = 0;
        }
        video.src = videos[index];
        video.play();
    });
</script>

在上面的示例代码中，我们定义了一个video元素以及一个存储视频路径的数组。通过监听视频的ended事件，我们在每个视频播放结束后切换到下一个视频，并重新播放。

4. 实现无缝循环播放多个视频

要实现无缝循环播放多个视频，我们需要在最后一个视频结束时切换到第一个视频，以实现无缝衔接。

<video id="myVideo" controls>
    <!-- 添加视频源 -->
</video>

<script>
    var video = document.getElementById("myVideo");
    var videos = ["video1.mp4", "video2.mp4", "video3.mp4"];
    var index = 0;

    video.addEventListener("ended", function() {
        index++;
        if (index == videos.length) {
            index = 0;
        }
        video.src = videos[index];
        video.addEventListener("loadedmetadata", function() {
            video.currentTime = 0;
            video.play();
        });
    });

    video.src = videos[index];
    video.addEventListener("loadedmetadata", function() {
        video.play();
    });
</script>

在上面的示例代码中，我们在监听ended事件的同时，还监听了loadedmetadata事件。当每个视频加载完成后，我们将视频的当前播放时间设置为0，以实现无缝循环。