How to play multiple videos sequentially in HTML5?

To achieve sequential playback of multiple videos in HTML5, you need to use JavaScript to listen for ended events and automatically load the next video. 1. Use a single

Playing multiple videos sequentially in HTML5 means automatically starting the next video when the current one ends. This can be achieved using JavaScript to listen for the ended event on the <video></video> element and then switching to the next video in your list.

Here's how you can do it:

✅ 1. Set up your HTML with a single video player

Use one <video></video> element and change its src dynamically. This avoids clutter and ensures only one video plays at a time.

 <video id="videoPlayer" controls>
  Your browser does not support the video tag.
</video>

✅ 2. Prepare a list of video sources in JavaScript

Store the video file paths in an array and keep track of the current index.

 const videoSources = [
  'video1.mp4',
  'video2.mp4',
  'video3.mp4'
];

let currentVideoIndex = 0;
const videoPlayer = document.getElementById('videoPlayer');

✅ 3. Load the first video and set up the sequence

Use the ended event to load the next video when playback finishes.

 function playNextVideo() {
  if (currentVideoIndex < videoSources.length) {
    videoPlayer.src = videoSources[currentVideoIndex];
    videoPlayer.load(); // Important: load the new source
    videoPlayer.play().catch(e => {
      console.error("Playback failed:", e);
    });
    currentVideoIndex;
  }
}

// Start playing the first video
playNextVideo();

// When current video ends, play the next one
videoPlayer.addEventListener(&#39;ended&#39;, playNextVideo);

? Once the last video ends, the sequence stops. If you want it to loop, reset the index:

 if (currentVideoIndex >= videoSources.length) {
  currentVideoIndex = 0; // or stop condition
}

✅ 4. Optional: Handle errors and edge cases

Sometimes a video might fail to load. You can listen for the error event and skip to the next one.

 videoPlayer.addEventListener('error', () => {
  console.warn(`Failed to load video: ${videoSources[currentVideoIndex - 1]}`);
  playNextVideo(); // Try the next video
});

✅ 5. Tips for better user experience

• Use preload="auto" or "metadata" depending on bandwidth concerns.
• Show a loading indicator or title for the current video.
• Pause or stop the sequence if the user manually stops the player (optional logic).

Summary

To play videos sequentially:

• Use one <video></video> element.
• Listen for the ended event.
• Update src and call load() and play() for the next video.
• Manage the index and handle errors.

It's simple, works across modern browsers, and doesn't require external libraries.

Basically just set up the event chain and let JavaScript handle the flow.

The above is the detailed content of How to play multiple videos sequentially in HTML5?. For more information, please follow other related articles on the PHP Chinese website!