GAP in a subtitle playlist causes switch to lowest quality level

[dagalvao]

What version of Hls.js are you using?

v1.5.7

What browser (including version) are you using?

Edge (chromium)

What OS (including version) are you using?

Windows 10

Test stream

https://hlsjs.video-dev.org/demo/?src=https%3A%2F%2Fhlsdebugpublish.blob.core.windows.net%2Fdagalvaotest2%2Fmanifest.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==

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. Create stream with 1 audio, 1 subtitle, 3 video tracks of different quality. Each video should have the same audio and subtitle track. The subtitle playlist should have multiple #EXT-X-GAP tags in it.
2. Start playing without subtitles. Highest quality video should be playing.
3. Turn on subtitles.
4. Observe as the subtitles start playing and the client switches to the lowest video quality.

Expected behaviour

Client should not switch to a lower video quality because of GAPs in the subtitles playlist. It should ignore GAPs and play the subtitles that it has available.

What actually happened?

Client switches to a lower video quality because of GAPs in the subtitles playlist.

Console output

...
base-stream-controller.ts:829 [log] > [subtitle-stream-controller]: Loading fragment 1170 cc: 30 of [0-1172] track: 0, target: 6962.116
base-stream-controller.ts:1915 [log] > [subtitle-stream-controller]: IDLE->FRAG_LOADING
content-steering-controller.ts:220  [warn] > [content-steering]: Could not resolve fragGap ("GAP tag found") with content-steering for Pathway: . levels: 3 priorities: ["."] penalized: {".":21910.799999952316}
onError @ content-steering-controller.ts:220
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handleFragLoadError @ base-stream-controller.ts:924
(anonymous) @ base-stream-controller.ts:870
Promise.catch (async)
_doFragLoad @ base-stream-controller.ts:870
_loadFragForPlayback @ base-stream-controller.ts:411
loadFragment @ base-stream-controller.ts:387
loadFragment @ subtitle-stream-controller.ts:496
doTick @ subtitle-stream-controller.ts:481
tick @ task-loop.ts:109
setInterval (async)
setInterval @ task-loop.ts:71
startLoad @ subtitle-stream-controller.ts:98
(anonymous) @ hls.ts:444
startLoad @ hls.ts:443
filterAndSortMediaOptions @ level-controller.ts:364
onManifestLoaded @ level-controller.ts:188
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handleMasterPlaylist @ playlist-loader.ts:428
onSuccess @ playlist-loader.ts:326
readystatechange @ xhr-loader.ts:238
XMLHttpRequest.send (async)
openAndSendXhr @ xhr-loader.ts:165
loadInternal @ xhr-loader.ts:124
load @ xhr-loader.ts:82
load @ playlist-loader.ts:351
onManifestLoading @ playlist-loader.ts:153
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
loadSource @ hls.ts:431
loadSelectedStream @ main.js:372
applyConfigEditorValue @ main.js:1729
onclick @ demo/:140
Show 3 more frames
Show less
base-stream-controller.ts:1915 [log] > [subtitle-stream-controller]: FRAG_LOADING->IDLE
main.js:734  Error event: {type: 'mediaError', details: 'fragGap', fatal: false, frag: Fragment, error: Error: GAP tag found
    at createGapLoadError (https://hlsjs-dev.video-dev.org/dist/hls.js:9223:17…, …}
(anonymous) @ main.js:734
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handleFragLoadError @ base-stream-controller.ts:924
(anonymous) @ base-stream-controller.ts:870
Promise.catch (async)
_doFragLoad @ base-stream-controller.ts:870
_loadFragForPlayback @ base-stream-controller.ts:411
loadFragment @ base-stream-controller.ts:387
loadFragment @ subtitle-stream-controller.ts:496
doTick @ subtitle-stream-controller.ts:481
tick @ task-loop.ts:109
setInterval (async)
setInterval @ task-loop.ts:71
startLoad @ subtitle-stream-controller.ts:98
(anonymous) @ hls.ts:444
startLoad @ hls.ts:443
filterAndSortMediaOptions @ level-controller.ts:364
onManifestLoaded @ level-controller.ts:188
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handleMasterPlaylist @ playlist-loader.ts:428
onSuccess @ playlist-loader.ts:326
readystatechange @ xhr-loader.ts:238
XMLHttpRequest.send (async)
openAndSendXhr @ xhr-loader.ts:165
loadInternal @ xhr-loader.ts:124
load @ xhr-loader.ts:82
load @ playlist-loader.ts:351
onManifestLoading @ playlist-loader.ts:153
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
loadSource @ hls.ts:431
loadSelectedStream @ main.js:372
applyConfigEditorValue @ main.js:1729
onclick @ demo/:140
Show 3 more frames
Show less
level-controller.ts:618 [log] > [level-controller]: Loading level index 0 with https://hlsdebugpublish.blob.core.windows.net/dagalvaotest2/video34.m3u8
subtitle-track-controller.ts:439 [log] > [subtitle-track-controller]: Loading subtitle playlist for id 0
base-stream-controller.ts:829 [log] > [subtitle-stream-controller]: Loading fragment 1170 cc: 30 of [0-1172] track: 0, target: 6962.624
base-stream-controller.ts:1915 [log] > [subtitle-stream-controller]: IDLE->FRAG_LOADING
content-steering-controller.ts:220  [warn] > [content-steering]: Could not resolve fragGap ("GAP tag found") with content-steering for Pathway: . levels: 3 priorities: ["."] penalized: {".":21910.799999952316}
onError @ content-steering-controller.ts:220
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handleFragLoadError @ base-stream-controller.ts:924
(anonymous) @ base-stream-controller.ts:870
Promise.catch (async)
_doFragLoad @ base-stream-controller.ts:870
_loadFragForPlayback @ base-stream-controller.ts:411
loadFragment @ base-stream-controller.ts:387
loadFragment @ subtitle-stream-controller.ts:496
doTick @ subtitle-stream-controller.ts:481
tick @ task-loop.ts:109
setInterval (async)
setInterval @ task-loop.ts:71
startLoad @ subtitle-stream-controller.ts:98
(anonymous) @ hls.ts:444
startLoad @ hls.ts:443
filterAndSortMediaOptions @ level-controller.ts:364
onManifestLoaded @ level-controller.ts:188
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handleMasterPlaylist @ playlist-loader.ts:428
onSuccess @ playlist-loader.ts:326
readystatechange @ xhr-loader.ts:238
XMLHttpRequest.send (async)
openAndSendXhr @ xhr-loader.ts:165
loadInternal @ xhr-loader.ts:124
load @ xhr-loader.ts:82
load @ playlist-loader.ts:351
onManifestLoading @ playlist-loader.ts:153
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
loadSource @ hls.ts:431
loadSelectedStream @ main.js:372
applyConfigEditorValue @ main.js:1729
onclick @ demo/:140
Show 3 more frames
Show less
base-stream-controller.ts:1915 [log] > [subtitle-stream-controller]: FRAG_LOADING->IDLE
main.js:734  Error event: {type: 'mediaError', details: 'fragGap', fatal: false, frag: Fragment, error: Error: GAP tag found
    at createGapLoadError (https://hlsjs-dev.video-dev.org/dist/hls.js:9223:17…, …}
(anonymous) @ main.js:734
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handleFragLoadError @ base-stream-controller.ts:924
(anonymous) @ base-stream-controller.ts:870
Promise.catch (async)
_doFragLoad @ base-stream-controller.ts:870
_loadFragForPlayback @ base-stream-controller.ts:411
loadFragment @ base-stream-controller.ts:387
loadFragment @ subtitle-stream-controller.ts:496
doTick @ subtitle-stream-controller.ts:481
tick @ task-loop.ts:109
setInterval (async)
setInterval @ task-loop.ts:71
startLoad @ subtitle-stream-controller.ts:98
(anonymous) @ hls.ts:444
startLoad @ hls.ts:443
filterAndSortMediaOptions @ level-controller.ts:364
onManifestLoaded @ level-controller.ts:188
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handleMasterPlaylist @ playlist-loader.ts:428
onSuccess @ playlist-loader.ts:326
readystatechange @ xhr-loader.ts:238
XMLHttpRequest.send (async)
openAndSendXhr @ xhr-loader.ts:165
loadInternal @ xhr-loader.ts:124
load @ xhr-loader.ts:82
load @ playlist-loader.ts:351
onManifestLoading @ playlist-loader.ts:153
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
loadSource @ hls.ts:431
loadSelectedStream @ main.js:372
applyConfigEditorValue @ main.js:1729
onclick @ demo/:140
Show 3 more frames
Show less
subtitle-track-controller.ts:190 [log] > [subtitle-track-controller]: Subtitle track 0 "lang6" lang:undefined group:text loaded [0-1173]
base-playlist-controller.ts:153 [log] > [subtitle-track-controller]: live playlist 0 REFRESHED 1173--1
base-playlist-controller.ts:280 [log] > [subtitle-track-controller]: reload live playlist 0 in 5903 ms
subtitle-stream-controller.ts:281 [log] > [subtitle-stream-controller]: Subtitle track 0 loaded [0,1173][part-1173--1],duration:6987.483079999958
base-stream-controller.ts:829 [log] > [subtitle-stream-controller]: Loading fragment 1170 cc: 30 of [0-1173] track: 0, target: 6962.699
base-stream-controller.ts:1915 [log] > [subtitle-stream-controller]: IDLE->FRAG_LOADING
content-steering-controller.ts:220  [warn] > [content-steering]: Could not resolve fragGap ("GAP tag found") with content-steering for Pathway: . levels: 3 priorities: ["."] penalized: {".":21910.799999952316}
onError @ content-steering-controller.ts:220
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handleFragLoadError @ base-stream-controller.ts:924
(anonymous) @ base-stream-controller.ts:870
Promise.catch (async)
_doFragLoad @ base-stream-controller.ts:870
_loadFragForPlayback @ base-stream-controller.ts:411
loadFragment @ base-stream-controller.ts:387
loadFragment @ subtitle-stream-controller.ts:496
doTick @ subtitle-stream-controller.ts:481
tick @ task-loop.ts:109
onSubtitleTrackLoaded @ subtitle-stream-controller.ts:332
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handlePlaylistLoaded @ playlist-loader.ts:702
handleTrackOrLevelPlaylist @ playlist-loader.ts:504
onSuccess @ playlist-loader.ts:318
readystatechange @ xhr-loader.ts:238
XMLHttpRequest.send (async)
openAndSendXhr @ xhr-loader.ts:165
loadInternal @ xhr-loader.ts:124
load @ xhr-loader.ts:82
load @ playlist-loader.ts:351
onSubtitleTrackLoading @ playlist-loader.ts:197
emit @ index.js:182
emit @ hls.ts:321
trigger @ hls.ts:329
loadPlaylist @ subtitle-track-controller.ts:440
(anonymous) @ base-playlist-controller.ts:302
setTimeout (async)
playlistLoaded @ base-playlist-controller.ts:301
onSubtitleTrackLoaded @ subtitle-track-controller.ts:195
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handlePlaylistLoaded @ playlist-loader.ts:702
handleTrackOrLevelPlaylist @ playlist-loader.ts:504
onSuccess @ playlist-loader.ts:318
readystatechange @ xhr-loader.ts:238
XMLHttpRequest.send (async)
openAndSendXhr @ xhr-loader.ts:165
loadInternal @ xhr-loader.ts:124
load @ xhr-loader.ts:82
load @ playlist-loader.ts:351
onSubtitleTrackLoading @ playlist-loader.ts:197
emit @ index.js:182
emit @ hls.ts:321
trigger @ hls.ts:329
loadPlaylist @ subtitle-track-controller.ts:440
(anonymous) @ base-playlist-controller.ts:302
setTimeout (async)
playlistLoaded @ base-playlist-controller.ts:301
onSubtitleTrackLoaded @ subtitle-track-controller.ts:195
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handlePlaylistLoaded @ playlist-loader.ts:702
handleTrackOrLevelPlaylist @ playlist-loader.ts:504
onSuccess @ playlist-loader.ts:318
readystatechange @ xhr-loader.ts:238
XMLHttpRequest.send (async)
openAndSendXhr @ xhr-loader.ts:165
loadInternal @ xhr-loader.ts:124
load @ xhr-loader.ts:82
load @ playlist-loader.ts:351
onSubtitleTrackLoading @ playlist-loader.ts:197
emit @ index.js:182
emit @ hls.ts:321
trigger @ hls.ts:329
loadPlaylist @ subtitle-track-controller.ts:440
(anonymous) @ base-playlist-controller.ts:302
setTimeout (async)
playlistLoaded @ base-playlist-controller.ts:301
onSubtitleTrackLoaded @ subtitle-track-controller.ts:195
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handlePlaylistLoaded @ playlist-loader.ts:702
handleTrackOrLevelPlaylist @ playlist-loader.ts:504
onSuccess @ playlist-loader.ts:318
readystatechange @ xhr-loader.ts:238
XMLHttpRequest.send (async)
openAndSendXhr @ xhr-loader.ts:165
loadInternal @ xhr-loader.ts:124
load @ xhr-loader.ts:82
load @ playlist-loader.ts:351
onSubtitleTrackLoading @ playlist-loader.ts:197
emit @ index.js:182
emit @ hls.ts:321
trigger @ hls.ts:329
loadPlaylist @ subtitle-track-controller.ts:440
setSubtitleTrack @ subtitle-track-controller.ts:545
SubtitleTrackController._this.onTextTracksChanged @ subtitle-track-controller.ts:572
setInterval (async)
pollTrackChange @ subtitle-track-controller.ts:124
SubtitleTrackController._this.asyncPollTrackChange @ subtitle-track-controller.ts:42
Show 9 more frames
Show less
base-stream-controller.ts:1915 [log] > [subtitle-stream-controller]: FRAG_LOADING->IDLE
main.js:734  Error event: {type: 'mediaError', details: 'fragGap', fatal: false, frag: Fragment, error: Error: GAP tag found
    at createGapLoadError (https://hlsjs-dev.video-dev.org/dist/hls.js:9223:17…, …}
(anonymous) @ main.js:734
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handleFragLoadError @ base-stream-controller.ts:924
(anonymous) @ base-stream-controller.ts:870
Promise.catch (async)
_doFragLoad @ base-stream-controller.ts:870
_loadFragForPlayback @ base-stream-controller.ts:411
loadFragment @ base-stream-controller.ts:387
loadFragment @ subtitle-stream-controller.ts:496
doTick @ subtitle-stream-controller.ts:481
tick @ task-loop.ts:109
onSubtitleTrackLoaded @ subtitle-stream-controller.ts:332
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handlePlaylistLoaded @ playlist-loader.ts:702
handleTrackOrLevelPlaylist @ playlist-loader.ts:504
onSuccess @ playlist-loader.ts:318
readystatechange @ xhr-loader.ts:238
XMLHttpRequest.send (async)
openAndSendXhr @ xhr-loader.ts:165
loadInternal @ xhr-loader.ts:124
load @ xhr-loader.ts:82
load @ playlist-loader.ts:351
onSubtitleTrackLoading @ playlist-loader.ts:197
emit @ index.js:182
emit @ hls.ts:321
trigger @ hls.ts:329
loadPlaylist @ subtitle-track-controller.ts:440
(anonymous) @ base-playlist-controller.ts:302
setTimeout (async)
playlistLoaded @ base-playlist-controller.ts:301
onSubtitleTrackLoaded @ subtitle-track-controller.ts:195
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handlePlaylistLoaded @ playlist-loader.ts:702
handleTrackOrLevelPlaylist @ playlist-loader.ts:504
onSuccess @ playlist-loader.ts:318
readystatechange @ xhr-loader.ts:238
XMLHttpRequest.send (async)
openAndSendXhr @ xhr-loader.ts:165
loadInternal @ xhr-loader.ts:124
load @ xhr-loader.ts:82
load @ playlist-loader.ts:351
onSubtitleTrackLoading @ playlist-loader.ts:197
emit @ index.js:182
emit @ hls.ts:321
trigger @ hls.ts:329
loadPlaylist @ subtitle-track-controller.ts:440
(anonymous) @ base-playlist-controller.ts:302
setTimeout (async)
playlistLoaded @ base-playlist-controller.ts:301
onSubtitleTrackLoaded @ subtitle-track-controller.ts:195
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handlePlaylistLoaded @ playlist-loader.ts:702
handleTrackOrLevelPlaylist @ playlist-loader.ts:504
onSuccess @ playlist-loader.ts:318
readystatechange @ xhr-loader.ts:238
XMLHttpRequest.send (async)
openAndSendXhr @ xhr-loader.ts:165
loadInternal @ xhr-loader.ts:124
load @ xhr-loader.ts:82
load @ playlist-loader.ts:351
onSubtitleTrackLoading @ playlist-loader.ts:197
emit @ index.js:182
emit @ hls.ts:321
trigger @ hls.ts:329
loadPlaylist @ subtitle-track-controller.ts:440
(anonymous) @ base-playlist-controller.ts:302
setTimeout (async)
playlistLoaded @ base-playlist-controller.ts:301
onSubtitleTrackLoaded @ subtitle-track-controller.ts:195
emit @ index.js:203
emit @ hls.ts:321
trigger @ hls.ts:329
handlePlaylistLoaded @ playlist-loader.ts:702
handleTrackOrLevelPlaylist @ playlist-loader.ts:504
onSuccess @ playlist-loader.ts:318
readystatechange @ xhr-loader.ts:238
XMLHttpRequest.send (async)
openAndSendXhr @ xhr-loader.ts:165
loadInternal @ xhr-loader.ts:124
load @ xhr-loader.ts:82
load @ playlist-loader.ts:351
onSubtitleTrackLoading @ playlist-loader.ts:197
emit @ index.js:182
emit @ hls.ts:321
trigger @ hls.ts:329
loadPlaylist @ subtitle-track-controller.ts:440
setSubtitleTrack @ subtitle-track-controller.ts:545
SubtitleTrackController._this.onTextTracksChanged @ subtitle-track-controller.ts:572
setInterval (async)
pollTrackChange @ subtitle-track-controller.ts:124
SubtitleTrackController._this.asyncPollTrackChange @ subtitle-track-controller.ts:42
Show 9 more frames
Show less
base-playlist-controller.ts:153 [log] > [level-controller]: live playlist 0 REFRESHED 1173--1
base-playlist-controller.ts:280 [log] > [level-controller]: reload live playlist 0 in 5892 ms
stream-controller.ts:633 [log] > [stream-controller]: Level 0 loaded [0,1173][part-1173--1], cc [0, 30] duration:6985.9124333333175
base-stream-controller.ts:829 [log] > [stream-controller]: Loading fragment 1173 cc: 30 of [0-1173] level: 0, target: 6979.902
base-stream-controller.ts:1915 [log] > [stream-controller]: IDLE->FRAG_LOADING
buffer-controller.ts:1000 [log] > [buffer-controller]: Updating Media Source duration to 6985.902
base-stream-controller.ts:430 [log] > [stream-controller]: Loaded fragment 1173 of level 0
blob:https://hlsjs-dev.video-dev.org/b70ce66b-c02b-4f22-866e-935dfc6efad6:16417 [log] > [transmuxer.ts]: Flushed fragment 1173 of level 0
base-stream-controller.ts:1915 [log] > [stream-controller]: FRAG_LOADING->PARSING
base-stream-controller.ts:1915 [log] > [stream-controller]: PARSING->PARSED
hls.ts:452 [log] > stopLoad
base-stream-controller.ts:1915 [log] > [stream-controller]: PARSED->STOPPED
base-stream-controller.ts:1915 [log] > [audio-stream-controller]: IDLE->STOPPED
base-stream-controller.ts:1915 [log] > [subtitle-stream-controller]: IDLE->STOPPED
stream-controller.ts:861  [warn] > [stream-controller]: Fragment 1173 of level 0 finished buffering, but was aborted. state: STOPPED

Chrome media internals output

No response

[robwalch]

#6478 should address the issue. This restores the default level switch behavior on audio and subtitle frag errors (it won't switch to another level with the same group). Then adding the subtitle fragment to the tracker as is done for audio and main fragments prevents the subtitle fragment picker from repeating the error.