iOS videos dont play if there are many in one page

[oscadev]

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.

• 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

export default function GoodVideoPlayer({ url }: { url: string }) {
  const [hasWindow, setHasWindow] = useState(false);
  useEffect(() => {
    if (typeof window !== "undefined") {
      setHasWindow(true);
    }
  }, []);
  console.log(url)
  return (
    <>
      {hasWindow && (
        <div className="flex w-full max-w-md mt-4">
          <ReactPlayer
            url={url}
            width={200}
            height={300}
            controls
          />

        </div>
      )}
    </>
  );
}

[kylekz]

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]

I am facing the same issue now, @kylekz @oscadev you guys find a solution yet?

[kylekz]

@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.