Video not preloading in iOS with preload="auto", it blinks the poster

[lucasgdev]

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-player-react

Which browsers are you using?

Safari on iOS

Which operating systems are you using?

iOS

Description

I'm using the mux-react-player to stream mux assets, we're using preload=auto to start loading the video asap no matter the case as the docs orientation, so the behavior when we click to play is smoother. We can see the assets being downloaded on all devices including the chunks, and we see the poster, as we click the poster is gone and the video starts playing.

But it seems this is not working for iOS Safari, in there even with preload="auto" the chunks are never downloaded (I was able to see it on the iOS simulator), we can see the poster but not the video in the behind, the poster blinks, we see a loader and then the download of chunks starts after we click play with an abrupt transition from poster to play, this is happening only on iOS devices and it's creating a broken experience as in some cases the chunk takes time to download and start, especially if the poster is not the first frame of the video this is more noticeable.

https://github.com/user-attachments/assets/dd7e991d-3670-4067-ba25-450984b98e6c

Reduced test case

https://codesandbox.io/p/sandbox/stoic-bessie-z7d3lr

Steps to reproduce

1. Open the video on any device and see how it loads and behaves
2. Open it in IOS, and you see that loads behave differently, no matter if we forced the preload
3. You can notice the poster blink and the load time as the chunks of the video are not preloaded
4. We're using v1 but I was able to see the same behavior on v2

Current Behavior

Preload is not actually preloading assets in IOS when we force preload="auto"

Expected Behavior

To download the assets when we force the preload="auto" for the player.

Errors

No response

What version of the package are you using?

v1.11.4

[luwes]

@lucasgdev thanks for the feedback! alas, this is not something we can change on our end. iOS Safari controls this behavior to keep users from using too much internet or memory. The behavior can also change based on if the phone is in energy saving mode or if the internet is via cellular.

there is possibly a workaround for iOS >=17 if you add the prefer-playback="mse" attribute. This should enable the new Managed Media Source extensions which gives the player more control over the loading logic.