How do I loop through multiple background videos?

Question

I'm trying to build a page with just three background videos playing one after the other when the page loads then reset back to the first and starts again kind of like a automatic loop but only the first video plays. similar to this site 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

You can achieve this by listening for the "ended" event on a particular video and when this occurs call the "play" method on the next video in the queue.

To do this:

1. Firstly add an id to each of the videos in the HTML so that you can then add event listeners to them. (In my code I have added ids "video1", "video2", "video3".)
2. Call a function (e.g playVideo) when a video has "ended", passing in the id of the next video to play.

Note: you only need the autoplay attribute for the first video. From then on we will be calling the play method instead.

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>

Answer 2

add this Html code:

<div class="videoContainer">
  <video id="video1" class="video" autoplay muted>
    <source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
  </video>

  <video id="video2" class="video hide" muted>
    <source src="./assets/videos/Jellyfish.mp4" type="video/mp4">
  </video>
</div>

Add CSS

add JavaScript:

 .hide{
   display:none;}
.videoContainer{
  width: 100%;
  max-height: 85vh;
  object-fit: cover;   
  z-index: -1;
 .video{
    max-height: 85vh;
    width: 100%;
    object-fit: cover;
   }

} `

add JavaScript (you can do it by using this keyword too):

  window.onload = function () {
  document.getElementById("video1").addEventListener("ended", function () {
  document.getElementById("video2").play();
  document.getElementById("video2").classList.remove("hide");
  document.getElementById("video1").classList.add("hide")

});
  document.getElementById("video2").addEventListener("ended", function () {
  document.getElementById("video1").play();
  document.getElementById("video1").classList.remove("hide");
  document.getElementById("video2").classList.add("hide")

});

  }