Getting warning 'video is being deferred until the player has loaded'

[djohal]

I'm getting this warning every time player is trying to load my video. It works fine when it loads the video for the first time, but after that for all other videos it shows a glimpse of previous video and then loads the actual one.

How can I wait for the player to fully load before sending in the url?

This is my what my code looks like:

<ReactPlayer  
    playing={false} 
    controls={true}
    url={this.props.movieVid}
/>

I'm probably doing something wrong here. It'd be great if you can help me out with this issue! p.s. thanks for your amazing work!

[cookpete]

The warning happens here when a new url is passed in before the onReady or onPlay event occurs. This behaviour was added to fix https://github.com/CookPete/react-player/issues/377.

Is this what is happening? What URLs are you trying to play?

[djohal]

I'm passing in youtube video that I'm getting from prop. How do I pass the url after onReady event?

[cookpete]

How do I pass the url after onReady event?

You should be just passing the url in on first render, not trying to pass it in at a later time. onReady is just a callback for when the player deems itself "ready" to play something. If the url you are passing in changes between the first render of ReactPlayer and the onReady event, you will get this warning. ReactPlayer will then attempt to load the url you changed to once the player is ready, which may show a flick of a previous video.

[djohal]

@CookPete That worked! I was passing the url on every render, fixed it by adding a conditional statement.

[ryanyu104]

@djohal How to pass the URLs on every render? I also getting URLs from prop. THX

[dChunikhin]

@djohal could you please describe, where did you add conditional statement to resolve the issue? Thanks in advance!

[rkshtsingh28]

@cookpete can you please help me out with same issue 'warning - video is being deferred until the player has loaded', i didn't get the solution clearly.

[cookpete]

The solution is to not change the url prop too quickly. This happens when a player tries to load but url changes before the player is ready, as described in my previous comment from nearly 3 years ago.

[MitchelSt]

@cookpete what would be the preferred approach in case you do want to dynamically change the url on, for example, a click event elsewhere in the application?

[cookpete]

what would be the preferred approach in case you do want to dynamically change the url on, for example, a click event elsewhere in the application?

There are many answers for this (and it's not really relevant to the issue) but the most basic way would be to have something like

const [url, setUrl] = useState(null)

in a top-level component somewhere. Then pass url down to your video player component that does

<ReactPlayer={url} ... />

and then pass setUrl down to the component you want to change the URL, then just do something like

<button onClick={() => setUrl('https://whatever')}>Click me!</button>

You could also use context, or redux, or any state management library.

[MitchelSt]

You could also use context, or redux, or any state management library.

The reason I asked this question right here is because I, like you said, changed the url dynamically (in my case it's essentially a useState hook that drills down the url as a prop).

However, when I run tests (with the React Testing Library), I get this warning in the console.

[cookpete]

Ah yeah, changing url rapidly (like in a test) is likely to trigger that warning. That’s annoying.

I'm considering getting rid of that guard altogether, or at least a prop that avoids it. It seems to cause more problems than it solves.

[plantshopping]

Also having the same problem as @MitchelSt

[kusgupta]

Also having the same problem as @MitchelSt as well.