Autoplay Policy Changes on Chrome

[edencorbin]

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

I ran into an issue (with latest 1.5+ version of react-player) where videos stopped playing on start, reading this article a video must be muted to autoplay. With the following settings the video would still not auto play in react-player (I got it working fine in vanilla video tag):

<ReactPlayer
ref={el => this._videoRef = el}
volume={0}
muted={true}
url={this.props.url}
width={this.props.width}
height={this.props.height}
loop={false} />

Is this a known issue, or do I have a setting wrong?

[alexgarces]

@edencorbin It also happened to me, but I figured it out a way to make the autoplay work (at least by now). It's kind of hacky but it is working for me for all platforms (Vimeo, YouTube, mp4) and popular browsers (Chrome, FireFox, Safari).

1. Render the component with these props:

<ReactPlayer volume={0} onReady={this.handleOnReady} playing={this.state.playing} url={this.props.url} />

2. Set playing in your component state as false: state = { playing: false }.

3. Add a handleOnReady method as a callback via onReady prop to change the state. I recommend to add a small timeout (necessary for Vimeo).

handleOnReady = () => setTimeout(() => this.setState({ playing: true }), 100);

Hope it works for you!

[ethanshar]

Unfortunately @alexgarces your solution did not work for me.

I did come across this,
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
and it appears this issue has started after Youtube policy regarding autoplay has changed.

I didn't notice recently a change in the behavior of video autoplay, but now I understand clearly what's causing it.

Interacting with the page (simple click will do) prior to video load will fix the autoplay, unfortunately this is something we can't program (fake clicks don't work).

In the article they suggest other options, but I would hope to have one included in this library.

[edencorbin]

@ethanshar I found that article too, and we ended up going to a plain video tag as our application cannot require user interaction prior to playing the video. It's working for use, we start the video muted. I like allot about react-player, but until this is resolved/supported we are using vanilla video tag.

[cookpete]

@edencorbin ReactPlayer uses a <video> tag under the hood when playing file URLs. You may need to add autoPlay and muted attributes manually via the config prop:

<ReactPlayer
  url='file.mp4'
  playing
  muted
  config={{ file: { attributes: {
    autoPlay: true,
    muted: true
  }}}}
/>

Ideally we should apply autoPlay and muted automatically if the playing and muted props are set.

As for YouTube and other players, this will be an ongoing battle with each API to retain the previous behaviour. I can't see a player param or other way to initialise a muted YouTube player to enable autoplay on the latest Chrome.

[cookpete]

I can't see a player param or other way to initialise a muted YouTube player to enable autoplay on the latest Chrome.

So it turns out you can pass in mute: 1 as a player param, this just isn't documented anywhere. Similarly, I guess this should be set when the muted prop is set.

[pugson]

@cookpete Changing mute: 1 to mute: 0 doesn't seem to be affecting the player after it has already rendered and started playing. Is that what you experience as well or am I doing something wrong?

[cookpete]

@pugson This is something that will be fixed soon for the YT player. All muting/autoplay behaviour needs to be sorted for every player. I'm also battling with karma tests no longer working on Travis (presumably because of a similar issue).

[cookpete]

This should be fixed in 1.5.1, but note the new readme section about autoplay. ReactPlayer must be muted to autoplay on Chrome 66 and later.

[hmontes]

Why i can play youtube videos normally but vimeo videos don't start?

(Autoplay works fine in youtube but don't in vimeo). Chrome disabled autoplay except for muted video but the video works normally in youtube

[jacobduursma]

You're not alone, we have the same issue @hmontes, sometimes it looks like vimeo will auto play but nothing actually is loading and then you have to press pause & play to actually play the media.

[cookpete]

@hmontes @jacobduursma I am assuming you are setting muted={true} when trying to autoplay videos? If Vimeo videos aren't auto-playing when muted then something is wrong, but I can't reproduce this.

Also worth checking out chrome://media-engagement/ and see how high youtube and vimeo appear in the list. It's possible that you have played enough YouTube videos enough for your MEI to be high enough to allow autoplay of non-muted videos, but not for Vimeo.

[jacobduursma]

You're right @cookpete, it does work when muted={true}, however in our case we want the media to play with sound (it's primarily for music), however the player loads after an interaction with the app, i.e. the clicking of an item from a list. Youtube and other providers work fine, just not vimeo.

It was my understanding that if interaction had taken place on the domain such as a click that it would be fine? For example even if I change chrome://flags/#autoplay-policy to document user activation required it still works fine for youtube, but not vimeo.

[Ranamalsingh12]

@cookpete Thanks for this solution
config={{ file: { attributes: {
autoPlay: true,
muted: true
}}}}
it worked for me.

[sandesh9680]

config={{ file: { attributes: {
autoPlay: true,
muted: true
}}}}
it worked for me also thankyou

[killerburn69]

config={{ file: { attributes: {
autoPlay: true,
muted: true
}}}}
can i add with work for ytb in TS

[Ranamalsingh12]

Yes you can

[VadimChorrny]

@ethanshar I found that article too, and we ended up going to a plain video tag as our application cannot require user interaction prior to playing the video. It's working for use, we start the video muted. I like allot about react-player, but until this is resolved/supported we are using vanilla video tag.

Hey! I have the same issue.
How did you solve this problem?