React not playing videos on safari

Question

I am trying to play a self hosted video on safari , i looked many solutions online i tried playsinline, i set the headers type. I tried multiple encodings for videos and formats noone of it managed to work , the snippet for the player is like that:

import globe from "../assets/globe5.mp4";
import ReactPlayer from "react-player";

<ReactPlayer
          playsinline={true}
          controls={false}
          playing={true}
          muted={true}
          loop={true}
          className="video"
          width="100%"
          height=""
          url={globe}
          type="video/mp4"
        />

score 0 · Answer 1 · answered Oct 12 '22 at 07:45

Your player url prop required as absolute url path of your video file. But your placed Video file object so it wont work. To work place your video file in public folder located at your root folder. And add that file path to your url prop.

import ReactPlayer from "react-player";

<ReactPlayer
  playsinline={true}
  controls={false}
  playing={true}
  muted={true}
  loop={true}
  className='video'
  width='100%'
  height=''
  url="/your-file-name.mp4"
  type='video/mp4'
/>

More more information on public folder refer https://create-react-app.dev/docs/using-the-public-folder/

React not playing videos on safari

1 Answers1