Video.js not working with Cloudflare HLS streams

Developers Stream
1

This is specific for iPad Pro with M1 + Chrome + Cloudflare HLS
Cloudflare HLS streams will get “stuck” after the initial loading (around 2-3 seconds in) and never recover.
I’ve tested this on iPhones, other iPads, multiple web browsers and android phones and never had that issue.

However it is 100% reproducible under above circumstances. The issue doesn’t occur if:

  • different iPad variant (possibly related to M1), tested with base iPad 8th gen.
  • Safari
  • non-Cloudflare playlists

Some obervations/thoughts on this:

  • on iPadOS all browsers use the same underlying browser engine, there should be no difference between Chrome and Safari, but there is
  • Cloudflare Video does seem to produce HLS entries which are slightly “off” eg. the resolution is 1px off. I ran the Apple provided mediastreamvalidator and it had some complaints about the stream itself.
  • I’ve tested the exact same stream with hls.js and there was no issue there

I’ve tried around 10 different streams from my Cloudflare account and it’s always the same.

Reduced test case

https://codepen.io/suau/pen/LYrmBgm

Steps to reproduce

  1. use iPad Pro with M1 (possibly iPad Air with M1 will do too)
  2. use Chrome
  3. open above codepen and playback Cloudflare HLS stream
  4. videojs will get stuck around 2-3 seconds in and never recover

Errors

No response

What version of Video.js are you using?

7.20.3

Video.js plugins used.

No response

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

Chrome 107.0.5304.101

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

iPad OS 15.5