Videos not able to play in safari browser

[mdshamoon]

Current Behavior

The same video is playing in Chrome but not able to play in safari

Expected Behavior

The video should play in safari as well

Environment

• URL attempting to play: https://filemanager.gupshup.io/fm/wamedia/ColoredCow/e4c00ae5-a35f-4540-a594-3c1ab1ee35b6
• Browser: Safari
• Operating system: Mac OS BigSur

[Wafaaismail]

same with me ? do you find any solution ?

[BorisJerrar]

Same for me, but it's perfectly playing on Chrome and Firefox. On Safari, i have to launch the play on click, not working, then i have to click pause, and finnaly click on play to work on Safari ...

[alxdw]

Are you relying on the onReady prop in any way?

Have noticed recently that in Safari chunked media does not load correctly and hence the onReady event is not triggered. This can affect playback.

[jamesryan-dev]

+1 here to doesn't play on safari even with playsinline={true}

[jamesryan-dev]

Are you relying on the onReady prop in any way?

Have noticed recently that in Safari chunked media does not load correctly and hence the onReady event is not triggered. This can affect playback.

Yes in fact, I am using onReady

onReady={() => setLoaded(true)}
style={{ opacity: loaded ? 1 : 0 }}

If not onReady what would be a good prop to use for this kind of idea? Tried onPlay but didn't work

[jamesryan-dev]

~Does safari support webM video types?~

Yes it was using webM video (works in chrome etc) but Safari still doesn't support

• can test your browser here: https://html5test.com

Plans to add the urls (webM and mp4) as an array in url={} and see what happens

[jamesryan-dev]

Got mp4 version playing on desktop safari but mobile safari still isn't working nor is mobile chrome?

http://pmo-lemon.vercel.app/

const BackgroundVideo: React.FC<Props> = ({
  state,
  videoFile,
  selectVideoType,
  videoUrl,
}): JSX.Element => {
  const { store } = state;
  console.log("store", store);
  const [loaded, setLoaded] = useState(false);
  console.log("videoFile", videoFile);
  let url;
  const setVideoUrl = (selectVideoType) => {
    console.log("selectVideoType", selectVideoType);
    if (selectVideoType == "url") {
      return videoUrl;
    } else {
      return [videoFile.video.url, videoFile.video2.url];
    }
  };

  return (
    <>
      <VideoBackground hideIntro={store.hideIntro}>
        <ReactPlayer
          style={{ opacity: loaded ? 1 : 0 }}
          url={setVideoUrl(selectVideoType)}
          muted={true}
          playing={true}
          controls={false}
          loop={true}
          playsinline={true}
          onStart={() => setLoaded(true)}
          config={{
            youtube: {
              playerVars: {
                showinfo: 0,
                autoplay: 0,
                color: "white",
                enablejsapi: 1,
                disablekb: 1,
                wmode: "transparent",
                modestbranding: 1,
                iv_load_policy: 3,
              },
            },
          }}
        />

        <div className="overlay"></div>
      </VideoBackground>
    </>
  );
};```

[cookpete]

Closing this off as I don't know what ReactPlayer can do about Safari not supporting a specific video type.

[skizzo]

In my case, Safari is loading the video from scratch (from my shared hosting server) every time I load the page. Does anybody have a solution for this?

[adrienfloor]

Hey guys Did you find something about this ? My video is natively playing in Safari, just by browsing the video url, but doesn't in Safari with ReactPlayer. It does work with ReactPlayer in Chrome without trouble. Any tip ? Thank you very much !

[testforworkhh]

Still this error, 2 years have passed. Unable to play video in Safari.

[cookpete]

2 years have passed. Unable to play video in Safari.

Two years have passed and no-one has specified a problem specific to this library and not Safari’s video support.

https://github.com/cookpete/react-player/issues/1305#issuecomment-1180793301

[testforworkhh]

Solved my problem. I uploaded a video to cloud storage, and it returned me a link like this: https://storage.net/video/VCLS45DO3JYRA03 The react-player played it in any browsers, but not in Safari. The problem was solved by getting a link with the format at the end. Like this: https://storage.net/video/VCLS45DO3JYRA0.mp4 Hope this helps someone

[hdung912]

i also try using storage with link .mp4 then try muted but with safari not working.

[gainatullin]

Solved my problem. I uploaded a video to cloud storage, and it returned me a link like this: https://storage.net/video/VCLS45DO3JYRA03 The react-player played it in any browsers, but not in Safari. The problem was solved by getting a link with the format at the end. Like this: https://storage.net/video/VCLS45DO3JYRA0.mp4 Hope this helps someone

Thank you! Solved my problem