React-player play videos automatically when loaded without controls

Question

Im using react-player with cloudinary to automatically play and loop a video without controls (so it looks like a gif).

Preferences currently set to:

<ReactPlayer 
    url={elem.media_path}
    playing={true} 
    loop={true} 
    controls={false}
/>

The video wont play until it has loaded unless controls are on and you start it manually.

Is it possible to automatically start the video without controls?

score 5 · Answer 1 · answered Sep 11 '20 at 09:53

5

Depends on browser which you are using but video must be muted if you want to autoplay without users interaction.

Chrome's autoplay policies are simple:

Muted autoplay is always allowed.

Autoplay with sound is allowed if:

User has interacted with the domain (click, tap, etc.).

On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.

The user has added the site to their home screen on mobile or installed the PWA on desktop.

Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

You can read more about it at Google Developers - Autoplay Policy Changes

answered Sep 11 '20 at 09:53

Jax-p

7,225
4
28
58

1

Excellent answer.. especially the "Media Engagement Index" can cause a lot of head-scratching. (first it works, then it doesn't). Is there a way to see what the index actually is? – Kokodoko Sep 11 '20 at 10:00
2

@Kokodoko If you would like to see your MEI in Chrome browser you can check it at `chrome://media-engagement/` (URL). – Jax-p Sep 11 '20 at 10:03
Wow! never knew about this. – Kokodoko Sep 11 '20 at 10:08
Thanks you, that's incredibly helpful! – rjmxtt Sep 11 '20 at 13:31

React-player play videos automatically when loaded without controls

1 Answers1