Can we play multiple .m3u8 videos in a single HTML file? Is that possible?

I am working on a project where I want to show multiple video streams on a single HTML file and the video is in “m3u8”. Now when I play a single video, at the same time I want to play multiple videos.

Yes, It is possible. You need to use the

I wish to play video one by one in sequence, do these elements OK for this?

Then you have to use addEventListener for the “ended” event which will be called when the current video is finished. Using this you can change the source of the video to the next one in the list.

You can also use javascript libraries like Plyr, Video.js, or hls.js (which is a javascript library for HLS playback) to control and play multiple m3u8 videos seamlessly.

Got it and can you please guide me more on this with suitable example?

Here is an example, follow this short tutorial:
• Create an

• Now, create a list of the URLs of the .m3u8 videos you want to play in JavaScript

code.const videoUrls = [
];• To get a reference to the

const videoElement = document.getElementById(“my-video”);
videoElement.src = videoUrls[0];• To play the first video using the to start.;• Add an event listener to the video element to listen for the “ended” event and move to the next video when the current video finishes playing:

videoElement.addEventListener(“ended”, function ()
if (currentIndex < videoUrls.length) {
videoElement.src = videoUrls[currentIndex];;
You can modify the playlist to suit your preferences, and once one video has finished playing, the next one in the list will continue to play.
You can also use libraries like Plyr, Video.js, or hls.js to control the playlist and playback.