0

I have a problem on playing the video when I click the play button on the center. I'm using react-player for it. I still need to click the play on the controls on the bottom just to play it. This only happens on IOS safari and on MacOS Safari. It works on android and google chrome.

Pls see my codesandbox here: CLICK HERE

  <ReactPlayer
    ref={videoRef}
    playsinline={true}
    playing={id === playerId}
    controls={true}
    url={video?.url}
    width="100%"
    height="100%"
    onPlay={() => {
      setPlayerId(id);
    }}
    onClickPreview={() => {
      setPlayerId(id);
    }}
    playIcon={
      <div
        className="play-icon"
        role="button"
        tabIndex={0}
        style={{ outline: "none" }}
      >
        {" "}
        <img src="https://i.ibb.co/wY9q1z6/play.png" alt="" />
      </div>
    }
    light={
      "https://pbs.twimg.com/profile_images/875749462957670400/T0lwiBK8_400x400.jpg"
    }
  />
Joseph
  • 7,042
  • 23
  • 83
  • 181
  • Your code sandbox has an M3U8 and a MP4 file. Which one is not working? I don't have an iOS device to test. – VC.One Feb 26 '21 at 10:57
  • @VC.One. It is playing when you click the play button on the controls on the bottom. The problem with safari is that it wont play directly when you click the play icon on the center. No problem regarding the file formats. – Joseph Feb 26 '21 at 12:44
  • Did you find a solution? – m_sultan May 08 '21 at 06:31

0 Answers0