player icon indicating copy to clipboard operation
player copied to clipboard

v1.12.12 live:dvr progress bar scrubbing not working.

Open ashishdhngr opened this issue 1 year ago • 5 comments

Current Behavior:

Version v1.12.12 using web components(in html or sveltekit) does not allow scrubbing/rewinding when stream-type is set to live:dvr, even though the hls stream allows for dvr capabilities.

Expected Behavior:

I should be able to move and scrub the progress bar/time. Only reverting back to 1.11.30 does the capability to scrub the timeline with DVR return.

Steps To Reproduce:

Steps to reproduce the behavior:

  1. Create an HTML page in vscode with the following settings -
  2. Use FFMPEG to create an HLS Stream with DVR
  3. Use a node or python server to serve the hls stream (http://localhost:8000/output.m3u8)

//HTML Code

Document
<script
  src="https://cdn.vidstack.io/[email protected]"
  type="module"
></script>

// FFMPEG CODE

ffmpeg -re -i your_video.mp4
-c:v libx264 -preset ultrafast -tune zerolatency -b:v 1000k -maxrate 1000k -bufsize 2000k
-c:a aac -b:a 128k -ar 48000 -ac 2
-f hls
-hls_time 4
-hls_playlist_type event
-hls_list_size 0
-hls_segment_filename segment_%03d.ts
output.m3u8

Environment:

ashishdhngr avatar Jan 16 '25 19:01 ashishdhngr

I might have pinpointed the issue here.

Even though I'm setting the streamType="live:dvr" on the media-player web component, this script is returning false for the canSeek state resulting in the above issue.

Also this script is checking for the EXT-X-DVR-ENABLED tag. Since this is not a standard HLS tag, it would be nice if we have the option to override/ignore it.

Setting streamType="live:dvr" is only to show the LIVE controls, the functionality of rewind is decided by the canSeek state.

MoeinMirkiani avatar Mar 12 '25 07:03 MoeinMirkiani

same here

mostafaznv avatar Mar 12 '25 08:03 mostafaznv

We're having the same problem. Shouldn't the live:dvr detection use the EXT-X-PLAYlST-TYPE?

  • EXT-X-PLAYLIST-TYPE:EVENT = live
  • EXT-X-PLAYLIST-TYPE:VOD = vod
  • Attribute missing (chunks cannot be removed from the beginning of the playlist) = live:dvr

Video.JS on the other hand is just checking if the playlist has a minimum duration of 5 minutes to consider it live:dvr.

philipgiuliani avatar Mar 17 '25 10:03 philipgiuliani

We also are experiencing this issue. A workaround we found for HLS: load the livestream URL as normal, and set the player streamType to 'on-demand'. This will look like it's playing an 'on-demand' stream and even dynamically adjust the progress bar as the livestream comes in, while allowing pausing and seeking. Then we can change the style of the progress bar if we want to appear red. We'll miss out on the "jump to live edge" button though.

spencervbishop avatar Mar 19 '25 20:03 spencervbishop

I also have the issue, but with a regular .mp3 file and "normal" settings. My component looks like this:

 <media-player
    :src="src"
    :autoplay
    :title
    :fullscreen-orientation="fullscreenOrientation"
    :loop
    :muted
    view-type="audio"
/>

And with this basic settings, scrubbing is not possible. It always shows 0:00 when I scrub and also starts from the beginning.

torbentschechne avatar Apr 24 '25 14:04 torbentschechne