reactjsreact-player

ReactPlayer can not play video when given a locahost url address

ReactPlayer.js cannot play the video streamed from an API.

<video controls src='http://localhost:3001/api/video/my_video' /> // it works

<ReactPlayer url="http://localhost:3001/api/video/my_video"  controls/> // failed to work

What is displayed using a <video> HTML element:

enter image description here

What is displayed when I use ReactPlayer:

enter image description here

Solution

  • This might work if you're facing CORS cross-origin restriction issue

    <ReactPlayer
  url="http://localhost:3001/api/video/my_video"
  config={{
    file: {
      attributes: {
        crossOrigin: "true",
      }
    }
  }}
  controls
/>;