Creating a progress bar (seek bar) for live streams without/with DVR

[Barahten]

I'm developing a custom video player for my needs, using pure JS and the HLS.js library. Stuck on developing the progress bar when a live video is playing in the player (live stream)

Introduction

An example with two video players from Flowplayer is available at this link to CodePen.

Start playing the first video. Pay attention to the LIVE button, it's blue. Then, a little later, pause it. After some time it will turn gray. Clicking the button will take you to the live broadcast

Start playing the second video. Pay attention to the LIVE button, it is blue, and there is a progress bar (search bar). Hover over the search bar and it will show the time. Click anywhere in the search bar. The player will start playing a pre-recorded live broadcast (DVR) from the second you requested, that is, we seem to be going back a little into the past. The LIVE button will turn gray. Clicking the button will take you to the live broadcast. If you are watching a live stream in real time, the LIVE button will always be blue. But as soon as you pause the video, after a while it will turn gray again, just like in the first player

What I would like to understand

How does the player determine whether the live stream is with DVR or without DVR. This is needed for conditional markup. For example, if the stream is without DVR, then we do not show the progress bar, but if the stream is with DVR, then we show the progress bar (conditionally)

LIVE button. Why does it change color from blue to gray? What is this signal about? How long does it take for it to change color? What does clicking this button do? How to implement similar functionality using JS?

Progress bar (search bar) for stream from DVR. What does time mean when you hover over this panel? What function does clicking on the progress bar perform (“what does this click do”)

Research

Having rummaged through the source codes, I noticed that all of them use an additional parameter, conventionally "min_dr_size", which, according to the Flowplayer documentation, means "How many seconds of live content need to be buffered before dvr is enabled. Default: 60 seconds." (Source - https://docs.flowplayer.com/player/configuration, large page, search for "seconds_to_dvr")

In many cases it is suggested to check video.duration === Infinity, but this does not give anything. In the case of playback, whether Live or VOD, video.duration will always return something, but not Infinity, this is no longer an option. But since I use HLS.js, by analyzing the manifest levels we can understand whether it is VOD or Live, for example, when parsing the manifest (Hls.Events.MANIFEST_PARSED event (source)), parse the first level. The details object has a live: true / false parameter, but even if we determine that live:true, this does not provide information about whether this live stream is with or without DVR.

JW player also has similar functionality. You can play around here - https://developer-tools.jwplayer.com/stream-tester, the source URL is on the demo page

In general, my findings did not give me anything, there are a lot of open questions left, I would be glad for any help or ideas

[robwalch]

video.duration will always return something, but not Infinity

Add liveDurationInfinity: true to the config.

You must decide what threshold of seekable range is needed for you to allow seeking (DVR).

[Barahten]

Hi, Rob!

Yes, you are absolutely right. By setting the liveDurationInfinity parameter in the hls.js configuration to TRUE, we can determine whether the stream is LIVE or VOD. But then I have another question. By checking the duration on infinity, how can I understand whether a given stream is with DVR or without DVR. Having looked at the sources of popular players, I discovered that they all use a certain variable that determines a certain threshold (in seconds) and is then compared with the duration. Here is an example, a function streamType() a duration and a threshold are passed into it as an argument, and inside the function there is a comparison: if the duration is infinity, then we have a live stream, otherwise if the duration is less than zero, we compare the duration with the threshold - if the duration is greater or equal to the threshold, which means we are in the DVR mode, otherwise in the mode without DVR. But after setting it in the configuration liveDurationInfinity I always get infinity, regardless of whether the stream is with DVR or without DVR. Can you tell me how I can determine if a live stream is with DVR or a live stream without DVR.

There is very little information about this on the Internet, and there is also little information in «Issues». I will be glad if you can help me

Thank you

[robwalch]

All live streams, regardless of the playlist length in seconds or the #EXT-X-PLAYLIST-TYPE, will use a duration of Infinity on the HTMLMediaElement with liveDurationInfinity.

To get the playlist length in seconds, use the difference between HTMLMediaElement .seekable.end(0) and .seekable.start(0). Alternatively, get the difference between Level.details .edge and .fragments[0].start.

In HLS.js, when#EXT-X-PLAYLIST-TYPE is defined in a media playlist by the asset server or packager, you can get its value using Level.type. Ex: hls.levels?.[hls.currentLevel]?.type will be populated after parsing a media playlist.

An #EXT-X-PLAYLIST-TYPE value of EVENT signals that segments are not removed on live update, so the playlist length will only get longer and allowing users to seek back in the event should be expected. Otherwise, the playlist length required for seeking back must be determined by the application, and should be a value greater than three target durations.