Rewind is not working in fullscreen mode in Safari

[zivac]

What version of Hls.js are you using?

1.5.14

What browser (including version) are you using?

Safari v17.6

What OS (including version) are you using?

MacOS Sonoma 14.6.1

Test stream

https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8

Configuration

{
  "debug": true,
  "enableWorker": true,
  "lowLatencyMode": true,
  "backBufferLength": 90
}

Additional player setup steps

No response

Checklist

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client (latest release) on https://hlsjs.video-dev.org/demo and not just on my page
• The issue occurs in the latest client (main branch) on https://hlsjs-dev.video-dev.org/demo and not just on my page
• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

1. Open the demo page: https://hlsjs.video-dev.org/demo/ in Safari
2. Enter fullscreen mode
3. Play the video
4. Try to use rewind

Expected behaviour

Rewind is working the same as when opening the m3u8 stream directly in Safari: https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8

What actually happened?

Rewind button is not working, video remains at the same timestamp while holding rewind.

Console output

[Log] [log] > – "[stream-controller]:" – "Loaded fragment 30 of level 4" (hls.js, line 9711)
[Log] [log] > – "[stream-controller]:" – "FRAG_LOADING->PARSING" (hls.js, line 10727)
[Log] [log] > – "[transmuxer.ts]: Flushed fragment 30 of level 4" (hls.js, line 16183)
[Log] [log] > – "[stream-controller]:" – "PARSING->PARSED" (hls.js, line 10727)
[Log] [log] > – "[stream-controller]:" – "Buffered main sn: 30 of level 4 (frag:[299.932-310.023] > buffer:[290.023-310.010])" (hls.js, line 9855)
[Log] [log] > – "[stream-controller]:" – "PARSED->IDLE" (hls.js, line 10727)
[Log] [log] > – "[stream-controller]:" – "Loading fragment 31 cc: 0 of [0-63] level: 4, target: 310.01" (hls.js, line 9980)
[Log] [log] > – "[stream-controller]:" – "IDLE->FRAG_LOADING" (hls.js, line 10727)
[Log] [log] > – "[stream-controller]:" – "Loaded fragment 31 of level 4" (hls.js, line 9711)
[Log] [log] > – "[stream-controller]:" – "FRAG_LOADING->PARSING" (hls.js, line 10727)
[Log] [log] > – "[transmuxer.ts]: Flushed fragment 31 of level 4" (hls.js, line 16183)
[Log] [log] > – "[stream-controller]:" – "PARSING->PARSED" (hls.js, line 10727)
[Log] [log] > – "[stream-controller]:" – "Buffered main sn: 31 of level 4 (frag:[310.010-320.023] > buffer:[290.023-319.994])" (hls.js, line 9855)
[Log] [log] > – "[stream-controller]:" – "PARSED->IDLE" (hls.js, line 10727)
[Log] [log] > – "[stream-controller]:" – "Loading fragment 32 cc: 0 of [0-63] level: 4, target: 319.994" (hls.js, line 9980)
[Log] [log] > – "[stream-controller]:" – "IDLE->FRAG_LOADING" (hls.js, line 10727)
[Warning] [warn] > – "Playback stalling at @300.760937552 due to low buffer ({\"len\":19.23323478360095,\"start\":290.0232222222222,\"end\":319.9941723356009})" (hls.js, line 27131)
[Warning] Error event: – {type: "mediaError", details: "bufferStalledError", fatal: false, …} (hls-demo.js, line 24782)
{type: "mediaError", details: "bufferStalledError", fatal: false, error: Error: Playback stalling at @300.760937552 due to low buffer ({"len":19.23323478360095,"start":290.0…, buffer: 19.23323478360095, …}Object
[Log] [log] > – "[stream-controller]:" – "Loaded fragment 32 of level 4" (hls.js, line 9711)
[Log] [log] > – "[stream-controller]:" – "FRAG_LOADING->PARSING" (hls.js, line 10727)
[Log] [log] > – "[transmuxer.ts]: Flushed fragment 32 of level 4" (hls.js, line 16183)
[Log] [log] > – "[stream-controller]:" – "PARSING->PARSED" (hls.js, line 10727)
[Log] [log] > – "[stream-controller]:" – "Buffered main sn: 32 of level 4 (frag:[319.994-330.023] > buffer:[290.023-330.002])" (hls.js, line 9855)
[Log] [log] > – "[stream-controller]:" – "PARSED->IDLE" (hls.js, line 10727)
[Log] [log] > – "[stream-controller]:" – "Loading fragment 33 cc: 0 of [0-63] level: 4, target: 330.002" (hls.js, line 9980)
[Log] [log] > – "[stream-controller]:" – "IDLE->FRAG_LOADING" (hls.js, line 10727)
[Warning] [warn] > – "playback not stuck anymore @300.8340055846699, after 1410ms" (hls.js, line 27000)
[Log] [log] > – "[stream-controller]:" – "Loaded fragment 33 of level 4" (hls.js, line 9711)
[Log] [log] > – "[stream-controller]:" – "FRAG_LOADING->PARSING" (hls.js, line 10727)
[Log] [log] > – "[transmuxer.ts]: Flushed fragment 33 of level 4" (hls.js, line 16183)
[Log] [log] > – "[stream-controller]:" – "PARSING->PARSED" (hls.js, line 10727)
[Log] [log] > – "[stream-controller]:" – "PARSED->STOPPED" (hls.js, line 10727)
[Log] [log] > – "[subtitle-stream-controller]:" – "IDLE->STOPPED" (hls.js, line 10727)
[Warning] [warn] > – "[stream-controller]:" – "Fragment 33 of level 4 finished buffering, but was aborted. state: STOPPED" (hls.js, line 27884)

Chrome media internals output

No response

[robwalch]

Hi @zivac. Thank you for the bug report.

HLS.js leaves playback and seeking up to the HTMLMediaElement. The HTMLMediaElement controls should be supported provided the underlying HTMLMediaElement API is as well.

Setting "Media Logging" to "Verbose" in the Console dev-tools settings shows that when pressing rewind there is an attempt to set a negative playback rate but it results in the rate changing to 0:

[Log] HTMLMediaElement::setPlaybackRate(EBAD07F66662AEE9) -2
[Debug] HTMLMediaElement::dispatchEvent(EBAD07F66662AEE9) ratechange
[Log] HTMLMediaElement::mediaPlayerRateChanged(EBAD07F66662AEE9) rate: 0

HLS.js is not involved in setting or changing the rate nor is it responsible for advancing the playhead. Its job is to buffer audio and video and the buffer is provisioned. This appears to be an issue with Safari providing controls that depend on the negative playbackRate to function with the active content, but it does not. Please file an issue with FeedbackAssistant so that it is visible to the folks implementing these controls and the underlying APIs.