If you’re trying to autoplay videos on the web, you might be tempted to reach for the HTML5 autoplay attribute. This sounds exactly like what you’re looking for, right? Well, not exactly. Let’s talk about why that’s probably not what you’re looking for and what the better option is.
Over the last few years, all major browser vendors have taken steps to aggressively block autoplaying videos on webpages. Safari announced some policy changes in June 2017 and Chrome followed suit shortly after and Firefox after that.
In summary: all these browsers will aggressively block videos from autoplaying on webpages. Each browser has slightly different rules around how it makes this decision. It’s a huge black box and browsers will not tell you what their exact rules are. The default behavior is block most autoplay attempts.
There are however some conditions that make it more likely for autoplay to work:
These conditions only make autoplay more likely, but remember that aside from these conditions, the user can override the browser’s default setting on a per-domain basis. This basically means that you can never rely on autoplay actually working.
Even if you try to follow the rules above, autoplay is still a finicky beast. One thing to keep in mind (for Chrome at least) is that due to Chrome’s Media Engagement Index. When you are testing autoplay on your own site it will probably work for you (because you visit your site often and play content, your MEI score is high). But then when new users come to your site, it is likely to fail (because their MEI score is low). As a developer, this is incredibly frustrating and another reason to always avoid the autoplay attribute.
I’m not suggesting that you avoid autoplaying videos, but I am suggesting that you always avoid the autoplay attribute. There is a better way.
video.play()
in javascript world, which returns a promise. If the promise resolves, then autoplay worked, if the promise rejects then autoplay was blocked.video.play()
rejects, then show a play button in the UI so that the user can click to play (the default video controls
attribute will work just fine). If you are using your own custom controls and your javascript calls video.play()
again as the result of an event that bubbled up from a user click, then it will work.video.play()
call rejecting. You will want to show some kind of “muted” icon in the UI that the user can click to unmute (again, the default video controls
attribute works great for that). You may notice that twitter and a lot of sites start videos in the muted state.
If you look at mux.com you’ll see that we autoplay a video on the top of the home page. I copied over how we did that and set up a demo here: https://o9s4w.csb.app/. The code is copied below and you can fork it and play around with the Code Sandbox.
Notice that we’re doing a few things here:
video.play()
when the component loads.controls
attribute.muted
state. Our video does not have audio, but if it did you would still want to start off in the muted state with the muted
attribute, and show a mute/unmute icon in the UI.