cookpete / react-player

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
https://cookpete.github.io/react-player
MIT License
9.4k stars 1.15k forks source link

iOS videos dont play if there are many in one page #1674

Open oscadev opened 1 year ago

oscadev commented 1 year ago

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

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

buikhacnam commented 6 months ago

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

kylekz commented 6 months ago

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

my249645545 commented 1 month ago

@buikhacnam Just set playsinline={true}. Working for me. Hope it‘s helpful for you.