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

Tech QnA
1

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.

2

Yes, It is possible. You need to use the <video> or <audio> element and JavaScript to do so, whereas, the <video> or <audio> element is used to create a player for the .m3u8 video, and JavaScript is used to control the playback of the video, like switching between different videos.

3

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

4

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.

5

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

6

Here is an example, follow this short tutorial:
• Create an <video> element in HTML, and create an id attribute that you will use to map it with JavaScript:

<video id="my-video"></video>

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

code.const videoUrls = [
 "video1.m3u8",
    "video2.m3u8",
    "video3.m3u8"
];

• To get a reference to the <video> elements use the getElementById function, and set its src property to the first video in the list:

const videoElement = document.getElementById("my-video");
videoElement.src = videoUrls[0];• To play the first video using the videoElement.play() to start.

videoElement.play();

• 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 () 
{
currentIndex++;
    if (currentIndex < videoUrls.length) {
        videoElement.src = videoUrls[currentIndex];
        videoElement.play();
    }
});

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.