Disable autoplay video javascript
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. Show
Browsers will block your autoplay attemptsOver 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. Autoplay will probably work for you, but it will break for your usersEven 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. What should I do instead?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.
Here’s an example with vanilla javascriptHere’s an example with ReactIf 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:
Nothing is more annoying than autoplay videos. Here is how to mute or stop them from playing in Chrome on the desktop and Android. One of the most annoying things any internet user must deal with is video automatically playing when you hit a site. Starting with Chrome 64, we showed you that you could permanently mute the annoying autoplay videos. When you’re on the offending site, click the site info button and click Sound, and change it to “Always block on the site.” While that’s all well and good, you may want to stop videos from playing automatically in the first place as it wastes bandwidth on mobile. We have covered how to avoid it with third-party extensions and tweaking browser settings – but those options have been hit or miss for years. So, here is how to tackle the autoplay problem once and for all with Chrome on your mobile device and the desktop. Disable Autoplay Videos in Chrome on AndroidAndroid makes disabling autoplay videos simple. First, launch Chrome on your phone or tablet and go to Settings > Site Settings. Next, scroll down the menu and tap on Media, and then Autoplay and toggle the switch off. Disable Autoplay Videos in Chrome on DesktopAs Chrome development continues, the company has said it will eventually include some options that make it easy to stop autoplay videos on sites as it does with muting them. Until then, you can still get the same results by digging into it a bit. Launch Chrome and in the Address Bar type: chrome://flags/#autoplay-policy and hit Enter. That will bring you directly to the flag that you need to change. From the drop-down box, change the setting from Default to “Document user activation is required” and relaunch the browser. Now, while an autoplay video might pop up on a site, it will not play automatically, and you will have to specifically click or tap on it if you want it to play. Using this, in addition to the muting option, will save you a lot of frustrations while browsing the web in Chrome. Do you find sites that autoplay videos annoying? Leave a comment below and let us know your thoughts. Or for more tech discussion, join our gP Forums for more troubleshooting help and advice.
Android, Google, Google Chrome, Mobile |