You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Operating system:
iOS 16.1 / iPhone 14 Pro (happens to others too). Website is using NextJS and StrapiJS as the CMS, using nginx
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
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.
@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.
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.
iOS 16.1 / iPhone 14 Pro (happens to others too). Website is using NextJS and StrapiJS as the CMS, using nginx
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
The text was updated successfully, but these errors were encountered: