Hls.js: Seeking through 256kbps CBR MP3 in Safari immediately stops playback

Created on 23 Oct 2020 · 11Comments · Source: video-dev/hls.js

What version of Hls.js are you using?

0.14.16

What browser and OS are you using?

Safari 14 (issue may exist on older versions, haven't tested)
macOS 10.15.7

Test stream:

https://hls-js.netlify.app/demo/?src=https://reelcrafter-storage-dev.s3.amazonaws.com/users/9292dcc6-f906-418a-aee0-074b297bfb52/audio/f149b213-4702-4650-9c99-ff4de42c4b20/hls/segments.m3u8

Checklist

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

Steps to reproduce

Start playing the track
Skip to somewhere near the end

Expected behavior

The player should seek to the position and keep playing.

Actual behavior

The player stops, and suddenly shows an incorrect media duration of 0:40 (the track is 1:22 long).

Console output

[Warning] [warn] > Playback stalling at @0 due to low buffer (buffer=30.01469387755102) (hls.js, line 21512)
[Warning] Error event: – {type: "mediaError", details: "bufferStalledError", fatal: false, …} (hls-demo.js, line 1772)
{type: "mediaError", details: "bufferStalledError", fatal: false, buffer: 30.01469387755102}Object
[Log] [log] > Loading 3 of [0-8], level 0, currentTime: 0.092, bufferEnd: 30.015 (hls.js, line 21512)
[Log] [log] > main stream-controller: IDLE->FRAG_LOADING (hls.js, line 21512)
[Warning] [warn] > playback not stuck anymore @0.096931839, after 508ms (hls.js, line 21512)
[Log] [log] > Loaded 3 of [0 ,8],level 0 (hls.js, line 21512)
[Log] [log] > Parsing 3 of [0 ,8],level 0, cc 0 (hls.js, line 21512)
[Log] [log] > main stream-controller: FRAG_LOADING->PARSING (hls.js, line 21512)
[Log] [log] > Parsed audio,PTS:[30.015,40.020],DTS:[30.015/40.020],nb:383,dropped:0 (hls.js, line 21512)
[Log] [log] > main stream-controller: PARSING->PARSED (hls.js, line 21512)
[Log] [log] > main buffered : [0.000,40.020] (hls.js, line 21512)
[Log] [log] > latency/loading/parsing/append/kbps:199/101/11/2/10220 (hls.js, line 21512)
[Log] [log] > main stream-controller: PARSED->IDLE (hls.js, line 21512)
[Log] [log] > media seeking to 77.638 (hls.js, line 21512)
[Log] [log] > Loading 7 of [0-8], level 0, currentTime: 77.638, bufferEnd: 77.638 (hls.js, line 21512)
[Log] [log] > main stream-controller: IDLE->FRAG_LOADING (hls.js, line 21512)
[Log] [log] > media seeking to 77.638 (hls.js, line 21512)
[Log] [log] > Loaded 7 of [0 ,8],level 0 (hls.js, line 21512)
[Log] [log] > Parsing 7 of [0 ,8],level 0, cc 0 (hls.js, line 21512)
[Log] [log] > main stream-controller: FRAG_LOADING->PARSING (hls.js, line 21512)
[Log] [log] > Parsed audio,PTS:[70.008,80.013],DTS:[70.008/80.013],nb:383,dropped:0 (hls.js, line 21512)
[Warning] [warn] > change mpeg audio timestamp offset from 40.01959183673469 to 70.00816666666667 (hls.js, line 21512)
[Log] [log] > main stream-controller: PARSING->PARSED (hls.js, line 21512)
[Log] [log] > media seeking to 77.638 (hls.js, line 21512, x2)
[Log] [log] > main buffered : [0.000,40.020] (hls.js, line 21512)
[Log] [log] > latency/loading/parsing/append/kbps:113/1/14/3/24420 (hls.js, line 21512)
[Log] [log] > main stream-controller: PARSED->IDLE (hls.js, line 21512)
[Log] [log] > Re-loading fragment with SN: 8 (hls.js, line 21512)
[Log] [log] > Loading 8 of [0-8], level 0, currentTime: 77.638, bufferEnd: 77.638 (hls.js, line 21512)
[Log] [log] > main stream-controller: IDLE->FRAG_LOADING (hls.js, line 21512)
[Log] [log] > Loaded 8 of [0 ,8],level 0 (hls.js, line 21512)
[Log] [log] > Parsing 8 of [0 ,8],level 0, cc 0 (hls.js, line 21512)
[Log] [log] > main stream-controller: FRAG_LOADING->PARSING (hls.js, line 21512)
[Log] [log] > Parsed audio,PTS:[80.013,82.782],DTS:[80.013/82.782],nb:106,dropped:0 (hls.js, line 21512)
[Warning] [warn] > change mpeg audio timestamp offset from 70.00816666666667 to 80.01306666666666 (hls.js, line 21512)
[Log] [log] > main stream-controller: PARSING->PARSED (hls.js, line 21512)
[Log] [log] > main buffered : [0.000,40.020] (hls.js, line 21512)
[Log] [log] > latency/loading/parsing/append/kbps:80/0/3/0/10691 (hls.js, line 21512)
[Log] [log] > main stream-controller: PARSED->IDLE (hls.js, line 21512)
[Log] [log] > audio sourceBuffer now EOS (hls.js, line 21512)
[Log] [log] > all media data are available, signal endOfStream() to MediaSource and stop loading fragment (hls.js, line 21512)
[Log] [log] > main stream-controller: IDLE->ENDED (hls.js, line 21512)
[Log] [log] > media source ended (hls.js, line 21512)
[Log] [log] > media seeking to 40.020 (hls.js, line 21512)
[Log] [log] > main stream-controller: ENDED->IDLE (hls.js, line 21512)
[Log] [log] > Loading 4 of [0-8], level 0, currentTime: 40.02, bufferEnd: 40.02 (hls.js, line 21512)
[Log] [log] > main stream-controller: IDLE->FRAG_LOADING (hls.js, line 21512)
[Log] [log] > media seeking to 40.020 (hls.js, line 21512)
[Log] [log] > media seeked to 40.020 (hls.js, line 21512)
[Log] [log] > Loaded 4 of [0 ,8],level 0 (hls.js, line 21512)
[Log] [log] > Parsing 4 of [0 ,8],level 0, cc 0 (hls.js, line 21512)
[Log] [log] > main stream-controller: FRAG_LOADING->PARSING (hls.js, line 21512)
[Log] [log] > Parsed audio,PTS:[40.020,50.024],DTS:[40.020/50.024],nb:383,dropped:0 (hls.js, line 21512)
[Warning] [warn] > can not abort audio buffer: InvalidStateError: The object is in an invalid state. (hls.js, line 21512)
[Warning] [warn] > change mpeg audio timestamp offset from 80.01306666666666 to 40.01958888888889 (hls.js, line 21512)
[Log] [log] > main stream-controller: PARSING->PARSED (hls.js, line 21512)
[Log] [log] > main buffered : [0.000,40.020] (hls.js, line 21512)
[Log] [log] > latency/loading/parsing/append/kbps:86/9/5/0/31990 (hls.js, line 21512)
[Log] [log] > main stream-controller: PARSED->IDLE (hls.js, line 21512)
[Log] [log] > Re-loading fragment with SN: 5 (hls.js, line 21512)
[Log] [log] > Loading 5 of [0-8], level 0, currentTime: 40.02, bufferEnd: 40.02 (hls.js, line 21512)
[Log] [log] > main stream-controller: IDLE->FRAG_LOADING (hls.js, line 21512)
[Log] [log] > Loaded 5 of [0 ,8],level 0 (hls.js, line 21512)
[Log] [log] > Parsing 5 of [0 ,8],level 0, cc 0 (hls.js, line 21512)
[Log] [log] > main stream-controller: FRAG_LOADING->PARSING (hls.js, line 21512)
[Log] [log] > Parsed audio,PTS:[50.024,60.003],DTS:[50.024/60.003],nb:382,dropped:0 (hls.js, line 21512)
[Warning] [warn] > change mpeg audio timestamp offset from 40.01958888888889 to 50.02448888888889 (hls.js, line 21512)
[Log] [log] > main stream-controller: PARSING->PARSED (hls.js, line 21512)
[Log] [log] > main buffered : [0.000,40.020] (hls.js, line 21512)
[Log] [log] > latency/loading/parsing/append/kbps:106/9/2/2/26819 (hls.js, line 21512)
[Log] [log] > main stream-controller: PARSED->IDLE (hls.js, line 21512)
[Log] [log] > Loading 4 of [0-8], level 0, currentTime: 40.02, bufferEnd: 40.02 (hls.js, line 21512)
[Log] [log] > main stream-controller: IDLE->FRAG_LOADING (hls.js, line 21512)
[Log] [log] > Loaded 4 of [0 ,8],level 0 (hls.js, line 21512)
[Log] [log] > Parsing 4 of [0 ,8],level 0, cc 0 (hls.js, line 21512)
[Log] [log] > main stream-controller: FRAG_LOADING->PARSING (hls.js, line 21512)
[Log] [log] > Parsed audio,PTS:[40.020,50.024],DTS:[40.020/50.024],nb:383,dropped:0 (hls.js, line 21512)
[Warning] [warn] > change mpeg audio timestamp offset from 50.02448888888889 to 40.01958888888889 (hls.js, line 21512)
[Log] [log] > main stream-controller: PARSING->PARSED (hls.js, line 21512)
[Log] [log] > main buffered : [0.000,40.020] (hls.js, line 21512)
[Log] [log] > latency/loading/parsing/append/kbps:0/0/3/1/799752 (hls.js, line 21512)
[Log] [log] > main stream-controller: PARSED->IDLE (hls.js, line 21512)

Screenshot showing proper track duration:

After seeking and track stops, duration is incorrect:
Screen Shot 2020-10-21 at 3 44 45 PM

Bug Confirmed Safari

Source

ffxsam

All 11 comments

@ffxsam hls.js has some logic for appending mp3s that might be specific to Chrome that is messing with how media is appended in Safari. Have you considered not using hls.js in Safari and just playing video using src=? Or encoding your audio as aac?

robwalch on 23 Oct 2020

Using AAC isn't an option (it's too long a discussion to get into). BTW, I should also mention this works fine in Firefox, too.

I haven't tried not using hls.js in Safari yet. Safari 14's response to video.canPlayType('application/vnd.apple.mpegurl') is "maybe". So if the response is "maybe" or "yes", should i just use <video src> directly, then?

ffxsam on 23 Oct 2020

@robwalch Just took your suggestion in not using hls.js for Safari, and it works great! I'll need to test on older versions of Safari too, though. I'll have to report back on that.

ffxsam on 23 Oct 2020

Thanks @ffxsam. It's definitely a bug in hls.js, but not one I can prioritize at the moment. Maybe a community member who also depends on mp3 playback could take this one.

Safari 14's response to video.canPlayType('application/vnd.apple.mpegurl') is "maybe". So if the response is "maybe" or "yes", should i just use

There is no "yes" with video.canPlayType('application/vnd.apple.mpegurl'). "maybe" means it should be able to play it. hls.js (MSE more specifically) is not supported on iOS phones so you always need to use src= playback there. Might as well do it for desktop too as it's more power efficient and pretty much the standard for browser HLS playback.

robwalch on 23 Oct 2020

👍1

Great, thanks for all the help, Rob!

ffxsam on 23 Oct 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.