ReactPlayer can not play video when given a locahost url address

Question

ReactPlayer.js cannot play the video streamed from an API. Please need some here

<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

The above is displayed using a <video>HTML elem.

Thats what is displayed when i use ReactPlayer

What can you see, can you share a screenshot? – Normal Sep 27 '22 at 18:44 — Normal, Sep 27 '22 at 18:44

score 0 · Accepted Answer · answered Sep 27 '22 at 19:09

0

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
/>;

answered Sep 27 '22 at 19:09

Shubhendu Sen

36
4

1

But its not stable, it works on and off – isaac Sep 29 '22 at 14:16

isaac · Answer 2 · 2023-01-26T12:43:21.157

0

I had forgotten to config CORS on the server side.

const cors = require('cors');

app.use(cors()); // installing cors middleware so that any request can be accepted to get the resource i.e video streams.

edited Jan 26 '23 at 12:43

answered Jan 19 '23 at 13:48

isaac

19
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 20 '23 at 17:33
Can you explain how you configured CORS? – Nebulosar Jan 25 '23 at 10:41

ReactPlayer can not play video when given a locahost url address

2 Answers2