Video freezes between second 3 to 6 and forwards playing

[anschm]

Description

We are using videojs 7.20.1 in our project. The streaming is done by cloudflare via HLS. If we play some videos with chrome or edge they are freezing between second 3 to 6. After that short freeze the player forwards playing the rest of the video. At the progress bar of the player we see a little gap at second 5. At firefox or safari we don't see this gap, but the video skips some frames between second 3 or 6 and don't freeze.

You can see the behaviour on following link:

https://dillybeeze.de/videos/46b332e2-2309-4a1b-a6e0-ca25494301a2/watch

I markt the gap in this picture (its really small):

Reduced test case

https://codepen.io/aschm/pen/GRxMydV

Steps to reproduce

1. Open https://codepen.io/aschm/pen/GRxMydV
2. Watch the video with chrome
3. Video freeze at second 6
4. A gap is at second 5

Errors

No error displayed

What version of Video.js are you using?

7.20.1

Video.js plugins used.

videojs-contrib-quality-levels, videojs-hls-quality-selector, videojs-logo

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

Chrome 103.0.5060.134

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

Mac and Windows

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[suau]

@anschm I ran across a related issue and believe it is Cloudflare related. Videojs doesn't seem to tolerate errors in playlist files much. Specifically the iPad Pro with M1 + Chrome will completely freeze and never recover. Note that it will work file on other iPads, iPhones and if switching to safari.

Did you every find a solution to this other than switching to another library ?

[poooow]

Not shure what causes the problem, but I was able to fix it by replacing old cloudflare URL https://videodelivery.net/{VIDEO_ID}/manifest/video.m3u8 with a new (recommended) one: https://customer-{CUSTOMER_ID}.cloudflarestream.com/{VIDEO_ID}/manifest/video.m3u8

[video-archivist-bot]

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

• for https://videodelivery.net/{VIDEO_ID}/manifest/video.m3u8: say @video-archivist-bot save VEeBLj
• for https://customer-{CUSTOMER_ID}.cloudflarestream.com/{VIDEO_ID}/manifest/video.m3u8: say @video-archivist-bot save WjyQVj

[misteroneill]

This sort of thing would happen if the player's seekable ranges are incomplete - which it gets from the stream itself. It sounds like this was an issue with the stream and may be resolved by (thanks @poooow) switching to a different CloudFlare stream URL.

If not, please feel free to open a new issue.