Chrome: HLS video with resolution change does not play back and has incorrect duration/metadata

[TeusAT]

Description

Observed in Chrome (and Chrome-like) browsers: An HLS video of a screen recording that has video resolution changes inside does not play back, and the duration reported is incorrect.

• The video plays back fine in Safari with video.js.
• The video plays back fine in Chrome with hls.js.

The true duration of the video is 13.16 seconds. The duration reported by video.js is 95447.75 seconds, sometimes as 47723.54 seconds.

The player reports that the video has started playing, but no playback is observed visually.

Reduced test case

https://teus-test-hls.s3.us-west-2.amazonaws.com/videojs_repro.html

Steps to reproduce

1. Open Chrome
2. Navigate to https://teus-test-hls.s3.us-west-2.amazonaws.com/videojs_repro.html
3. Notice in the console, the duration is reported incorrectly
4. Hit the play button. Notice the time remaining is a large number that counts down, but no playback is observed

Repeat steps 2-4 in Safari: duration and playback is normal.

In Chrome, compare this to the hls.js basic test case at https://teus-test-hls.s3.us-west-2.amazonaws.com/videohls_repro.html. Hit Play and observe playback.

Errors

No errors appear to be reported by videojs

What version of Video.js are you using?

8.23.4

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Chrome 138

What OS(es) and version(s) does this occur with?

MacOS, Windows 11