如何循环播放多个背景视频？

Question

我正在尝试构建一个页面，其中只有三个背景视频在页面加载时一个接一个地播放，然后重置回第一个，然后像自动循环一样重新开始，但只播放第一个视频。类似于此网站https://mediaboom.com/

<video class="video" autoplay muted loop>
                <source src="bar.mp4" type="video/mp4">
            </video>

            <video class="video"autoplay muted loop>
                <source src="baking.mp4" type="video/mp4">
            </video>

            <video class="video" autoplay muted loop>
                <source src="meat.mp4" type="video/mp4">
            </video>
        </div>

Answer 1

您可以通过侦听特定视频上的“结束”事件来实现此目的，并在发生这种情况时在队列中的下一个视频上调用“播放”方法。

为此：

1. 首先向HTML中的每个视频添加一个ID，以便您可以 然后向他们添加事件监听器。 （在我的代码中，我添加了ID “ video1”，“ video2”，“ video3”。）
2. 在视频“结束”时调用一个函数（例如playVideo），并传入要播放的下一个视频的ID。

注意：您只需要第一个视频的自动播放属性。从那时起，我们将改为调用play方法。

JavaScript

window.onload = function(){ 
    //now that the window has loaded we add our event listeners to the videos.
    //When video1 has ended, play video2 etc
    document.getElementById("video1").addEventListener("ended", function(){ playVideo("video2"); });
    document.getElementById("video2").addEventListener("ended", function(){ playVideo("video3"); });
    document.getElementById("video3").addEventListener("ended", function(){ playVideo("video1"); });
}

function playVideo(videoID){
    //This playVideo function takes in the ID of a video element and plays that video.
    var videoElement = document.getElementById(videoID);
    videoElement.play();
}

HTML

<video id="video1" class="video" autoplay muted>
    <source src="bar.mp4" type="video/mp4">
</video>

<video id="video2" class="video" muted>
    <source src="baking.mp4" type="video/mp4">
</video>

<video id="video3" class="video" muted>
    <source src="meat.mp4" type="video/mp4">
</video>