Open oscadev opened 1 year ago
Running into the same issue. It even happens in Chrome dev tools and switching the responsive preset to an iPhone. Switching it to a Pixel works fine.
Enabling one of forceHLS
or forceSafariHLS
fixes it for Chrome dev tools while switched to an iOS device, but doesn't fix it when using on an actual iOS device. Also tried passing in the latest hls.js version (1.4.12) and still doesn't work.
I am facing the same issue now, @kylekz @oscadev you guys find a solution yet?
@buikhacnam Kind of? I don't remember the reason why I switched but I switched to another video player package, which had the same issue where audio would play but not the video.
I had to update to hls.js
1.5.8, then set the player to play inline. I also forced the component to only render after hydration (Nextjs) which may not be necessary but its working now. It should be noted that iOS does not support the MediaSource
API whereas iPad OS does. iOS 17+ supports the ManagedMediaSource
API which is what hls.js
is using. As for iOS 16 and lower, I have no idea.
I suspect that this should also work on react-player
as it's also driven by hls.js
but ymmv.
@buikhacnam Just set playsinline={true}. Working for me. Hope it‘s helpful for you.
Current Behavior
When a page has many instances of ReactPlayer, no video will ever play in iOS Safari. This doesnt happen on desktop, or even on Safari desktop. This also doesnt happen when its just a few videos or a single video on a page. I have ruled out the video files themselves (since they work in all other devices, and work in iOS when only a few). There are two different ways it errors. It either refuses to start the video even though it correctly loads the first frame as the thumbnail, and enters fullscreen mode as though its going to start playing, OR it stops trying ti play and shows a play button with a prohibited symbol over it with no thumbnail at all.
Expected Behavior
Videos should play.
Bonus info
I have tried using the default player, the "file" player, the "lazy" player, and have tried with and without "preload: "metadata"" Here it the component I am using as the player