react-player: src is not set when using file

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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 6
Comments: 18 (2 by maintainers)

Most upvoted comments

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?

furkan-cat on Oct 8, 2022

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

rklf on Sep 23, 2022

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

kayden-kim on Sep 21, 2022

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

nickchauhan on Oct 1, 2022

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

aayodejii on May 11, 2023

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.

Hydrock on Nov 26, 2022

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",

jamesryan-dev on Mar 20, 2023

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

amacpherson-upsiide on Sep 20, 2022

https://github.com/cookpete/react-player/pull/1612 fixes this

phcorp on Apr 14, 2023

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.

kevin-guertin on Oct 7, 2022