src is not set when using file

[amacpherson-upsiide]

Current Behavior

When setting URL = a mp4 the video SRC is never set, thus the player never loads. Occasionally when hot reloading kicks in the player will work.

Expected Behavior

setting url="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" should work

also tried, url={[{src: 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4'}]}

Steps to Reproduce

• create react app
• import import ReactPlayer from 'react-player/file'; OR import ReactPlayer from 'react-player';
• add player
  <ReactPlayer url="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" controls />
  

Other Information

[amacpherson-upsiide]

I can also see an error returned by the onError call back with the following...
MEDIA_ELEMENT_ERROR: Empty src attribute

[amacpherson-upsiide]

Downgraded CRA to react 17 and things seem to be working so chalking this up to an issue with React 18 specifically.

[cookpete]

Could this be a weird side effect of #1360? Not sure what’s going on here.

[kayden-kim]

I have same issue too. I think that 'src' should be set again when component is re-mounted.

https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state

With Strict Mode starting in React 18, whenever a component mounts in development, React will simulate immediately unmounting and remounting the component

[usamamashkoor]

I am facing the same issue with React.js 18 and Next.js, did any one find a solution for this?

[rklf]

I was facing also this issue (React 18.2.0 - react-player 2.11.0)

Comment (or removing) <React.StrictMode> tag is fixing that in development environment (NODE_ENV), it is working in production environment (when app is built) though since <React.StrictMode> is ignored in production

[nickchauhan]

Downgrading react-player to v2.10.1 or removing <React.StrictMode> fixes the issue. I believe the problem is PR #1360.

[kevin-guertin]

I have the same issue in React 18. Downgrading to v2.10.1 does NOT fix the issue. Everything is fine after removing <React.StrictMode> as mentioned previously in both v2.10.1 and v2.11.0. However, that is not an acceptable fix.

In my function component, I do not render the video player at all if the URL string happens to be empty/null/undefined.

Here is part of the error that is generated from the onError callback. This same error happens in v2.10.1 and in v2.11.0 in React 18. You can see that my local video file path appears in the currentSrc property so it looks like the component is receiving the proper URL.

[furkan-cat]

Downgrading react-player to v2.10.1 or removing <React.StrictMode> fixes the issue. I believe the problem is PR #1360.

Yep when i remove the strict mode, all works fine. Is there any solution for this issue?

[Hydrock]

Downgrading react-player to v2.10.1 or removing <React.StrictMode> fixes the issue. I believe the problem is PR #1360.

I can't downgrade react because i use NextJS last version, but downgrading react-player to v2.10.1 is helped me. Thank you gues a lot.

[cookpete]

Hopefully fixed by #1538

[phcorp]

was not fixed by #1538 for me (I'm using v2.11.2)

the problem appears for urls provided as an array of objects with type and src properties
the problem does not appear when the URL is provided as a string

I have tested on audio files so far, I guess the problem is the same on video files

[jamesryan-dev]

I am also experiencing this issue:

  return (
    <ReactPlayer
      //   url="https://www.youtube.com/watch?v=y9j-BL5ocW8"
      url={[
        { src: "/retail-video.webm", type: "video/webm" },
        { src: "/retail-video2.mp4", type: "video/mp4" },
      ]}
      loop={true}
      playing={true}
      controls={false}
      muted={true}
      width="100%"
      height="100%"
      config={{
        youtube: {
          playerVars: {
            start: "10",
          },
        },
      }}
    />
  );

 "react-player": "^2.12.0",

[davshoward]

Also experiencing this. Single string works fine, array of either strings or objects fails.

[phcorp]

#1612 fixes this

[aayodejii]

The issue is yet to be resolved, I'm using 2.12.0

[otwm]

me too, The issue is yet to be resolved, I'm using 2.12.0

[mohamedanushkar]

Me too, cant play multiple urls for safari and chrome. anyone know s a fix?