How can I embed a .ts stream on my website, using HLS.js?

Tech QnA
1

I want to embed the URL in my website using HLS.js but am confused about the format of .ts (Transport Stream). I tried VLC but didn’t work for me.
Here is the stream: http://iptvfree1.com:7899/live:.cid.9b5190e69349237e/hGYOfCADiS/160
Please help me with this.
Thanks in advance.

2

Hey John!

To embed a .ts stream on your website using m3u8 and HLS.js, you will need to follow these steps:

  1. First, you will need to have HLS.js installed on your website. You can do this by adding the following script tag to the head of your HTML file:

Copy code

  1. Next, you will need to create an HTML5 video element on your page where you want to display the stream. You can do this by adding the following code to your HTML file:

Copy code

3. In your JavaScript code, you can use the HLS.js library to load and play the .ts stream. You will need to use the Hls constructor to create a new HLS object, and then use the loadSource method to load the m3u8 playlist file. Here is an example of how you can do this:

Copy code
var video = document.getElementById(‘video’);
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(‘stream.m3u8’);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}

Replace “stream.m3u8” with the URL of your m3u8 playlist file.

This code will create a new HLS object, load the m3u8 playlist file, attach the stream to the video element, and start playing the stream when the manifest is parsed.

I hope this helps! Let me know if you have any questions.

3

Thanks for your response!
One more question how to see the video length in the HLS player before all TS files are created?