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?

1 Like
4

Hey john! glad to see you again in our community.

Here is the answer to your query:

When it comes to HLS (HTTP Live Streaming), figuring out how long a video is can be a little difficult until the playlist which is usually an M3U8 file begins to include information about how long the video is. The way HLS works is that it divides a video into smaller pieces called Transport Stream (TS) files, which are subsequently added to the playlist. Because of this, determining the overall video length before all TS files have been created is challenging.

However, you can estimate the length of the video using the parts that are now available, and you can update this estimate whenever more segments become available.
Here’s a closer look at this procedure:

1. Understanding HLS and Estimating Video Duration

Because HLS is designed for adaptive streaming, video players may adjust to shifting network circumstances and device specifications. Video content in an HLS stream is broken up into short TS pieces, which are requested and played by the player in order. The playlist changes over time as new portions are added, so the length of the entire film isn’t known until they’re all included.

2. The Approximation of Video Length Strategy

As HLS segments are being produced, take into consideration the following steps to estimate the video length:

  • Playlist Examination

    Keep a close eye on the HLS playlist, which is frequently available as an M3U8 file, as it is changed. This playlist includes details on the segments that are available. This can be done manually or automatically by looking at the content of the playlist.

  • Duration Estimation

    For every section, find out how long it is by looking at the “EXTINF” tag in the playlist. The duration of the section in seconds is revealed by this tag. As you evaluate these sections, keep a running total of their lengths.

    If you would rather do things by hand, you can use a calculator to add up the lengths of each segment.

  • Interface Revision

    As you determine the estimated video duration, incorporate it into your HLS player’s interface. This gives viewers an idea of how much of the content they have already seen and how much is still to come.

  • Constantly Checking for Updates

    Keep an eye on the playlist frequently to stay updated on any changes. When new episodes are added to the playlist, update your anticipated video length to reflect the changes.

The consistency of segment durations and the frequency of playlist updates determine how accurate your predicted video length is. Your estimate is increasingly accurate as more segments are added to the playlist, but the total length of the video is unknown until every section has been created.