Multiple Subtitle Tracks causes stutter and crashes

[austinh]

What version of Hls.js are you using?

v1.5.20

What browser (including version) are you using?

Chrome 134.0.6998.89 and Safari Version 18.3.1 (20620.2.4.11.6)

What OS (including version) are you using?

Mac OS X 15.3

Test stream

https://stream.media.muscache.com/JolR5nC6e85RxkjqqNimXdbLpclSz8O2wFlqahVQek00.m3u8

Configuration

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

Additional player setup steps

m3u8 files with a large number of cc tracks on long videos tend to cause frames to be dropped, cpu and memory issues, and even crashes. Seems worse on safari which has the video completely stutter for a few seconds. This video file has 100+ tracks which are a requirement legally for certain companies for a11y issues.

The issue does not happen in the native hls implementation, and it does not happen on shaka player. It seems to happen on startup with hls.js

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. Use a video with 100+ large track files
2. Try and play the video *observe the frame stutter and overall lagginess in the browser for the first few seconds)

In safari it's even worse, with just a blank white screen for several seconds before the browser finally responds.

Expected behaviour

Should not stutter and playback should start immediately.

What actually happened?

Lagginess, inability to load the video or even interact with the browser window for a few seconds while the captions are processsed.

Console output

Using Hls.js config: {debug: true, enableWorker: true, lowLatencyMode: true, backBufferLength: 90}
logger.ts:74 [log] > Debug logs enabled for "Hls instance" in hls.js version 1.5.20
hls.ts:446 [log] > stopLoad
hls.ts:410 [log] > loadSource:https://stream.media.muscache.com/JolR5nC6e85RxkjqqNimXdbLpclSz8O2wFlqahVQek00.m3u8
stream-controller.ts:579 [log] > [stream-controller]: Trigger BUFFER_RESET
hls.ts:460 [log] > resume buffering
hls.ts:380 [log] > attachMedia
buffer-controller.ts:198 [log] > [buffer-controller] created media source: MediaSource
buffer-controller.ts:995 [log] > [buffer-controller] Media source opened
level-controller.ts:337 [log] > [level-controller]: manifest loaded, 5 level(s) found, first bitrate: 2493700
abr-controller.ts:58 [log] > setting initial bwe to 2493700
buffer-controller.ts:186 [log] > [buffer-controller] 1 bufferCodec event(s) expected
abr-controller.ts:701 [log] > [abr] picked start tier {"codecSet":"avc1,mp4a","videoRanges":["SDR"],"preferHDR":false,"minFramerate":0,"minBitrate":595100}
abr-controller.ts:855 [info] > [abr] switch candidate:3->3 adjustedbw(2493700)-bitrate=0 ttfb:0.1 avgDuration:0.0 maxFetchDuration:4.0 fetchDuration:0.1 firstSelection:true codecSet:avc1,mp4a videoRange:SDR hls.loadLevel:-1
hls.ts:431 [log] > startLoad(-1)
hls.ts:460 [log] > resume buffering
level-controller.ts:432 [log] > [level-controller]: Switching to level 3 (720p SDR avc1,mp4a @2493700) from level -1
subtitle-track-controller.ts:276 [log] > [subtitle-track-controller]: Updating subtitle tracks, 123 track(s) found in "sub1" group-id
level-controller.ts:600 [log] > [level-controller]: Loading level index 3 with https://manifest-gcp-us-east4-vop1.cfcdn.media.muscache.com/6tDbAebntMZZtnbGzydzHmiSXila01pYNaw4keUb2b6B7uWyqV01kshG6h3i7gnD6krAyHAUdeGvEFxQg019gPD00oNSmAYDsHk01rgxJyzT00wMA/rendition.m3u8?cdn=cloudflare&expires=1742565600&skid=default&signature=NjdkZDcwZTBfMzYyZjg4ZDkwMTE4MTdhYjI3ZmExYWQ2ODEwOGQ2NzA3ODVmMmViYzg1OTQ4MTFlMzA1NzE2MGZhMGZkNTgyMg==
base-stream-controller.ts:1810 [log] > [stream-controller]: STOPPED->IDLE
base-stream-controller.ts:1810 [log] > [subtitle-stream-controller]: STOPPED->IDLE
stream-controller.ts:642 [log] > [stream-controller]: Level 3 loaded [0,407][part-407--1], cc [0, 0] duration:2038.82013
buffer-controller.ts:862 [log] > [buffer-controller] Updating Media Source duration to 2038.820
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 0 cc: 0 of [0-407] level: 3, target: 0
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
transmuxer-interface.ts:88 [log] > injecting Web Worker for "main"
transmuxer-interface.ts:230 [log] > [transmuxer-interface, main]: Starting new transmux session for sn: 0 p: -1 level: 3 id: 1
        discontinuity: true
        trackSwitch: true
        contiguous: false
        accurateTimeOffset: true
        timeOffset: 0
        initSegmentChange: true
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 0 of level 3
31ab3026-e9b4-4e59-85e5-9c5d167772e9:555 [log] > Debug logs enabled for "main" in hls.js version 1.5.20
transmuxer-interface.ts:394 [log] > [mp4-remuxer]: ISGenerated flag reset
transmuxer-interface.ts:394 [log] > [mp4-remuxer]: initPTS & initDTS reset
transmuxer-interface.ts:394 [log] > [mp4-remuxer]: reset next timestamp
transmuxer-interface.ts:394 [log] > manifest codec:mp4a.40.2, ADTS type:2, samplingIndex:3
transmuxer-interface.ts:394 [log] > parsed codec:mp4a.40.5, rate:48000, channels:2
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
stream-controller.ts:1306 [log] > [stream-controller]: Init audio buffer, container:audio/mp4, codecs[selected/level/parsed]=[mp4a.40.2/mp4a.40.2/mp4a.40.5]
stream-controller.ts:1317 [log] > [stream-controller]: Init video buffer, container:video/mp4, codecs[level/parsed]=[avc1.640020/avc1.640020]
buffer-controller.ts:394 [log] > [buffer-controller] 0 bufferCodec event(s) expected audio,video
buffer-controller.ts:944 [log] > [buffer-controller] creating sourceBuffer(audio/mp4;codecs=mp4a.40.2)
buffer-controller.ts:944 [log] > [buffer-controller] creating sourceBuffer(video/mp4;codecs=avc1.640020)
audio-stream-controller.ts:134 [log] > [audio-stream-controller]: InitPTS for cc: 0 found from main: 901502
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 0 of level 3
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
favicon.ico:1 
            
            
           GET https://hlsjs.video-dev.org/favicon.ico 404 (Not Found)
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 0 of level 3 (frag:[0.000-4.992] > buffer:[0.000-4.988])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
abr-controller.ts:855 [info] > [abr] switch candidate:3->4 adjustedbw(19300465)-bitrate=12330865 ttfb:0.1 avgDuration:5.0 maxFetchDuration:4.9 fetchDuration:2.2 firstSelection:false codecSet:avc1,mp4a videoRange:SDR hls.loadLevel:3
stream-controller.ts:271 [log] > [stream-controller]: Adapting to level 4 from level 3
level-controller.ts:432 [log] > [level-controller]: Switching to level 4 (1080p SDR avc1,mp4a @6969600) from level 3
level-controller.ts:600 [log] > [level-controller]: Loading level index 4 with https://manifest-gcp-us-east4-vop1.cfcdn.media.muscache.com/kOyYYcPVBO8u8k00C00NW8U8P6SPgT7S6jTO01WX4y7z5Zkm3S01VEn00Jce00Rx6oNj00xzQ1mKYWlRxLT8fdRAKsgzva02x8ELLyCA/rendition.m3u8?cdn=cloudflare&expires=1742565600&skid=default&signature=NjdkZDcwZTBfMDRjZDE3NzFjMjc4YjYwODljN2I5Njc5NzNiOTdmOTVhNzFjZDMzYmFlYWYzZWM1ZDNjYzcwMTVlODU3NjRkYg==
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->WAITING_LEVEL
stream-controller.ts:642 [log] > [stream-controller]: Level 4 loaded [0,407][part-407--1], cc [0, 0] duration:2038.82013
base-stream-controller.ts:1810 [log] > [stream-controller]: WAITING_LEVEL->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 1 cc: 0 of [0-407] level: 4, target: 5
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
transmuxer-interface.ts:230 [log] > [transmuxer-interface, main]: Starting new transmux session for sn: 1 p: -1 level: 4 id: 1
        discontinuity: false
        trackSwitch: true
        contiguous: false
        accurateTimeOffset: true
        timeOffset: 5
        initSegmentChange: false
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 1 of level 4
transmuxer-interface.ts:394 [log] > [mp4-remuxer]: ISGenerated flag reset
transmuxer-interface.ts:394 [log] > [mp4-remuxer]: initPTS & initDTS reset
transmuxer-interface.ts:394 [log] > [mp4-remuxer]: reset next timestamp
transmuxer-interface.ts:394 [log] > manifest codec:mp4a.40.2, ADTS type:2, samplingIndex:3
transmuxer-interface.ts:394 [log] > parsed codec:mp4a.40.5, rate:48000, channels:2
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
stream-controller.ts:1306 [log] > [stream-controller]: Init audio buffer, container:audio/mp4, codecs[selected/level/parsed]=[mp4a.40.2/mp4a.40.2/mp4a.40.5]
stream-controller.ts:1317 [log] > [stream-controller]: Init video buffer, container:video/mp4, codecs[level/parsed]=[avc1.64002a/avc1.64002a]
buffer-controller.ts:412 [log] > [buffer-controller] changing audio sourceBuffer type to audio/mp4;codecs=mp4a.40.5
buffer-controller.ts:367 [log] > [buffer-controller] switching codec mp4a.40.2 to mp4a.40.5
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 1 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 1 of level 4 (frag:[4.988-9.993] > buffer:[0.000-9.984])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 2 cc: 0 of [0-407] level: 4, target: 9.984
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 2 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 2 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 2 of level 4 (frag:[9.984-14.998] > buffer:[0.000-14.997])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 3 cc: 0 of [0-407] level: 4, target: 14.997
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 3 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 3 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 3 of level 4 (frag:[14.997-19.989] > buffer:[0.000-19.987])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 4 cc: 0 of [0-407] level: 4, target: 19.987
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 4 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 4 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 4 of level 4 (frag:[19.987-25.003] > buffer:[0.000-24.992])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 5 cc: 0 of [0-407] level: 4, target: 24.992
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 5 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 5 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 5 of level 4 (frag:[24.992-29.997] > buffer:[0.000-29.995])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 6 cc: 0 of [0-407] level: 4, target: 29.995
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 6 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 6 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 6 of level 4 (frag:[29.995-34.987] > buffer:[0.000-34.985])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 7 cc: 0 of [0-407] level: 4, target: 34.985
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 7 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 7 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 7 of level 4 (frag:[34.985-40.000] > buffer:[0.000-39.990])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 8 cc: 0 of [0-407] level: 4, target: 39.99
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 8 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 8 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 8 of level 4 (frag:[39.990-44.995] > buffer:[0.000-44.992])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 9 cc: 0 of [0-407] level: 4, target: 44.992
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 9 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 9 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 9 of level 4 (frag:[44.992-50.000] > buffer:[0.000-49.984])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 10 cc: 0 of [0-407] level: 4, target: 49.984
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 10 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 10 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 10 of level 4 (frag:[49.984-54.997] > buffer:[0.000-54.988])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 11 cc: 0 of [0-407] level: 4, target: 54.988
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 11 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 11 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 11 of level 4 (frag:[54.988-59.993] > buffer:[0.000-59.989])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 12 cc: 0 of [0-407] level: 4, target: 59.989
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 12 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 12 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 12 of level 4 (frag:[59.989-65.003] > buffer:[0.000-64.998])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 13 cc: 0 of [0-407] level: 4, target: 64.998
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 13 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 13 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 13 of level 4 (frag:[64.998-69.995] > buffer:[0.000-69.987])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 14 cc: 0 of [0-407] level: 4, target: 69.987
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 14 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 14 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 14 of level 4 (frag:[69.987-74.992] > buffer:[0.000-74.987])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 15 cc: 0 of [0-407] level: 4, target: 74.987
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 15 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 15 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 15 of level 4 (frag:[74.987-80.000] > buffer:[0.000-79.997])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 16 cc: 0 of [0-407] level: 4, target: 79.997
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 16 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 16 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 16 of level 4 (frag:[79.997-84.992] > buffer:[0.000-84.985])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE
base-stream-controller.ts:767 [log] > [stream-controller]: Loading fragment 17 cc: 0 of [0-407] level: 4, target: 84.985
base-stream-controller.ts:1810 [log] > [stream-controller]: IDLE->FRAG_LOADING
base-stream-controller.ts:398 [log] > [stream-controller]: Loaded fragment 17 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: FRAG_LOADING->PARSING
transmuxer-interface.ts:394 [log] > [transmuxer.ts]: Flushed fragment 17 of level 4
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:579 [log] > [stream-controller]: Buffered main sn: 17 of level 4 (frag:[84.985-89.990] > buffer:[0.000-89.984])
base-stream-controller.ts:1810 [log] > [stream-controller]: PARSED->IDLE

Chrome media internals output

[robwalch]

I don't see any performance issues in Chrome. Can you expand on the performance sampling image above?

In Safari I do see a significant amount of time adding TextTracks. We add tracks the same as Safari HLS playback does for HTMLMediaElement controls to populate the subtitles/captions menu. Native captions rendering can be disabled but then you need to handle tracks and cues some other way (using VTT.js for example).

There is nothing in the add and change callbacks that is eating up cycles here - if there was we'd see a problem in Chrome as well. It looks like internally processing the new tracks and emitting these events blocks other media work (MSE source setup and appending).

[robwalch]

HLS.js defers handling of track "change" events to avoid performance issues when adding multiple tracks:

hls.js/src/controller/subtitle-track-controller.ts

Lines 113 to 118 in 03f96e5

	if (this.useTextTrackPolling) {
	this.pollTrackChange(500);
	} else {
	this.media.textTracks.addEventListener(
	'change',
	this.asyncPollTrackChange,

The performance of onTextTracksChanged does not seem to be the issue - deferring or not using the "change" callback prior to adding tracks does not improve startup performance.

Setting renderTextTracksNatively to false which disables TextTrack usage for subtitles and captions complete is the only thing that appears to make a difference. That suggests that HTMLMediaElement.TextTracks.addTrack on its own is quite slow.

[austinh]

https://codesandbox.io/p/devbox/hls-js-test-forked-q33qhl?workspaceId=ws_NAoPeNQ9ayG475wP5ggqYa - heres a page to test in safari

Safari is the main issue here - chrome just seems to slightly stutter for me - but i also cant seem to get it to happen again after turning debugging off - maybe it isn't an issue. I've also included a video of what happens where the screen is white for a good 10seconds

CleanShot.2025-03-14.at.14.41.13.mp4

[robwalch]

@austinh, have you reported the issue to Apple?

Please do so at https://feedbackassistant.apple.com/ if you haven't already. Include your affiliation, the information shared here, and any impact on public facing web sites/pages.

Share the Feedback ID here so that I can help route the issue.

I've made a minimal reproducible example, which does not use HLS.js to illustrate that the issue is unique to Safari's processing of new TextTracks: https://codepen.io/robwalch/pen/OPJzNzB

[austinh]

Sorry just now getting around to this: https://feedbackassistant.apple.com/feedback/17720697 here is the feedback link @robwalch