You probably ran into a bug where your video that had muted, loop, playsinline, autoplay properties set was not playing and had a giant play button overlay on it when using Safari.
This happens due to Low Power Mode. Apple prevents automatic playback of any video with LPM enabled.
Unfortunately there is no way around it other than getting the user to press the native play button or a custom one that calls the play() function on the video element.
No way to detect it
iOS does not expose a way to detect if Low Power Mode is enabled to prevent fingerprinting risk when websites track you.
Three.js and React Three Fiber also affected
With Low Power Mode enabled, you will not be able to autoplay a video plane inside a Three.js scene either without user interaction.
WebP workaround for short videos
If this is a tiny decorative video there is a possible way to work around this issue. Safari treats animated images differently than videos and lets them autoplay without any restrictions in LPM.
You're going to need to use ffmpeg to convert your video into WebP first.
Then set up a component that loads up the video and checks if it can be played. If playback fails then hide the video element and show an <img> with a WebP source in its place.
However, I truly do not recommend this method as the WebP file will most likely be much larger than the original video and take longer to load + use even more resources.
Easier to just let go and give up. You win this one, Tim Apple. 😩
