Playback freezes when switching videos with same configuration

[daveisfera]

What version of Hls.js are you using?

1.5.20

What browser (including version) are you using?

Chrome 134.0.6998.118 (Official Build) (x86_64)

What OS (including version) are you using?

macOS 15.3.2

Test stream

https://raw.githubusercontent.com/daveisfera/hls_switch_same_init/9ee116765e3296abc01cd3e530623321336d7755/video.m3u8

Configuration

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

Additional player setup steps

Using demo page

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. Play above link on demo page
2. Observe error output

Expected behaviour

Video plays through the switch

What actually happened?

Playback pauses when switch happens

Console output

9.194 | Media element detached
9.195 | Loading https://raw.githubusercontent.com/daveisfera/hls_switch_same_init/9ee116765e3296abc01cd3e530623321336d7755/video.m3u8
9.197 | Loading manifest and attaching video element...
9.204 | Media element attached
9.37 | 1 quality levels found
9.371 | Manifest successfully loaded, trying to recover media error.
13.532 | Media element detached
13.535 | The video playback was aborted due to a corruption problem or because the video used features your browser did not support - PIPELINE_ERROR_DECODE: Error Domain=NSOSStatusErrorDomain Code=-17694 "(null)" (-17694): VTDecompressionOutputCallback
13.541 | Media element attached, trying to swap audio codec and recover media error.
13.833 | Media element detached
13.836 | The video playback was aborted due to a corruption problem or because the video used features your browser did not support - PIPELINE_ERROR_DECODE: Error Domain=NSOSStatusErrorDomain Code=-17694 "(null)" (-17694): VTDecompressionOutputCallback
13.844 | Media element attached, cannot recover. Last media error recovery failed.
14.134 | The video playback was aborted due to a corruption problem or because the video used features your browser did not support - PIPELINE_ERROR_DECODE: Error Domain=NSOSStatusErrorDomain Code=-17694 "(null)" (-17694): VTDecompressionOutputCallback

Chrome media internals output

{
  "465:4": {
    "id": "465:4",
    "properties": {
      "render_id": 465,
      "player_id": 4,
      "created": "2025-03-21 04:23:19.134592 UTC",
      "origin_url": "https://videojs-http-streaming.netlify.app/",
      "kFrameUrl": "https://videojs-http-streaming.netlify.app/?debug=false&autoplay=false&muted=false&fluid=false&minified=false&sync-workers=false&liveui=true&llhls=true&url=https%3A%2F%2Fraw.githubusercontent.com%2Fdaveisfera%2Fhls_switch_same_init%2F9ee116765e3296abc01cd3e530623321336d7755%2Fsecond.m3u8&type=application%2Fx-mpegURL&keysystems=&buffer-water=false&exact-manifest-timings=false&pixel-diff-selector=false&network-info=true&dts-offset=false&override-native=true&object-fit=false&use-mms=true&preload=auto&mirror-source=true&forced-subtitles=false&native-text-tracks=false",
      "kFrameTitle": "videojs-http-streaming Demo",
      "url": "blob:https://videojs-http-streaming.netlify.app/57b3ff4c-c88e-4d97-82f0-868c0d5dbd94",
      "info": "ChunkDemuxer",
      "kRendererName": "RendererImpl",
      "pipeline_state": "kStarting",
      "duration": 4.005
    },
    "allEvents": [
      {
        "time": 0,
        "key": "created",
        "value": "2025-03-21 04:23:19.134592 UTC"
      },
      {
        "time": 0.08300000429153442,
        "key": "origin_url",
        "value": "https://videojs-http-streaming.netlify.app/"
      },
      {
        "time": 0.0910000205039978,
        "key": "kFrameUrl",
        "value": "https://videojs-http-streaming.netlify.app/?debug=false&autoplay=false&muted=false&fluid=false&minified=false&sync-workers=false&liveui=true&llhls=true&url=https%3A%2F%2Fraw.githubusercontent.com%2Fdaveisfera%2Fhls_switch_same_init%2F9ee116765e3296abc01cd3e530623321336d7755%2Fsecond.m3u8&type=application%2Fx-mpegURL&keysystems=&buffer-water=false&exact-manifest-timings=false&pixel-diff-selector=false&network-info=true&dts-offset=false&override-native=true&object-fit=false&use-mms=true&preload=auto&mirror-source=true&forced-subtitles=false&native-text-tracks=false"
      },
      {
        "time": 0.09500002861022949,
        "key": "kFrameTitle",
        "value": "videojs-http-streaming Demo"
      },
      {
        "time": 0.14899998903274536,
        "key": "url",
        "value": "blob:https://videojs-http-streaming.netlify.app/57b3ff4c-c88e-4d97-82f0-868c0d5dbd94"
      },
      {
        "time": 0.17599999904632568,
        "key": "info",
        "value": "ChunkDemuxer"
      },
      {
        "time": 0.18599998950958252,
        "key": "kRendererName",
        "value": "RendererImpl"
      },
      {
        "time": 0.2200000286102295,
        "key": "pipeline_state",
        "value": "kStarting"
      },
      {
        "time": 178.13499999046326,
        "key": "duration",
        "value": 4.005
      }
    ],
    "lastRendered": 0,
    "firstTimestamp_": 307161374.866
  }
}

[robwalch]

Do you get the same Chrome media internals logs from https://hlsjs.video-dev.org/demo/ as you do from the https://videojs-http-streaming.netlify.app/ details shared above?

Please share whatever other details you can about the content encoding, cross-player testing, and open-source issues filed.

[daveisfera]

The video is encoded on iOS using AVAssetWriter

Video.js had another issue but runs into the same issue once that's addressed, but it plays in Safari

[robwalch]

This appears to be a bug in Chrome. Have you filed a chromium issue?

[daveisfera]

I opened a bug for Chrome, but I tried it with HLS.js in Safari and it didn't play at all

[robwalch]

but I tried it with HLS.js in Safari and it didn't play at all

I don't see any issues with playback in Safari against latest hls.js https://hlsjs.video-dev.org/demo/?src=https%3A%2F%2Fraw.githubusercontent.com%2Fdaveisfera%2Fhls_switch_same_init%2F9ee116765e3296abc01cd3e530623321336d7755%2Fvideo.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOmZhbHNlLCJzdG9wT25TdGFsbCI6ZmFsc2UsImR1bXBmTVA0IjpmYWxzZSwibGV2ZWxDYXBwaW5nIjotMSwibGltaXRNZXRyaWNzIjotMX0=

or in 1.5.20 (https://5982f183.hls-js-dev.pages.dev/demo/?src=...)

Do you want to file a new bug or provide more info?

I just did some tests with vanilla JS/MSE and this issue only shows up in Chrome, but it shows up every time. There is no overlap in the video but as long as Chrome tries to coalesce the discontiguous ranges, a pipeline/decode error occurs at 4 seconds.

The ranges would have to be appended at least 0.1s apart (start the second sequence at 4.1 instead of 4), to prevent the media error. But then playback would stall and a seek needed to jump the gap. It's not a worthwhile workaround. Chrome should be able to handle HEVC discontinuities.

[daveisfera]

I'm using an Intel Mac with macOS 15.4 and Safari 18.4 (20621.1.15.11.10)

Status:

0.02 | Loading https://raw.githubusercontent.com/daveisfera/hls_switch_same_init/9ee116765e3296abc01cd3e530623321336d7755/video.m3u8
0.022 | Loading manifest and attaching video element...
0.035 | 1 quality levels found
0.038 | Manifest successfully loaded
1.003 | Media element attached
1.222 | The video playback was aborted due to a corruption problem or because the video used features your browser did not support - Media failed to decode

Error:

1.211 | Buffer append error
1.211 | A media error occurred: bufferAppendError

What other info can I provide to help with that?

[robwalch]

I'm using an Intel Mac with macOS 15.4 and Safari 18.4 (20621.1.15.11.10)

OK. I get a decode error on Intel Mac (Safari 15.6.1) but it has nothing to do with switching; first.m3u8 and second.m3u8 assets also fail. At best I see a frame of video and then the media element displays an error state.

MediaSource.isTypeSupported('video/mp4;codecs="hvc1.1.6.L150"') returns true and the HLS asset plays when loaded into QuickTime Player via "File > Open Location..." so I don't see why it shouldn't be supported in Safari with MSE.

I cannot reproduce the issue on Apple Silicon (tested in M3 MBP and iPhone 16 Pro Max).

Please report the issue to Feedback Assistant and share the id.

The video is encoded on iOS using AVAssetWriter

It would be good to include feedback on that article and sample code. Include as much information about the source movie file as you can (what it was shot on, movie info).