Muted Autoplay on Mobile - Say goodbye to canvas hacks and animated GIFs!
Muted autoplay for video is supported by Chrome for Android as of version 53. Playback will start automatically for a video element once it comes into view if both
muted are set, and playback of muted videos can be initiated pragmatically with
play(). Previously, playback on mobile had to be initiated by a user gesture, regardless of the muted state.
<video autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
You can see this in action by visiting this sample. Playback of the
muted video starts automatically in Chrome 53 or later.
In addition, muted playback can now be initiated using the
play() method. Previously,
play() would only initiate playback if it came from a user gesture such as a button click. Compare the following two demos on Android — try them on Chrome 53, then on an older version:
We recommend using the
autoplay attribute whenever possible, and the
play() method only if necessary.
It's possible to unmute a video programmatically in response to a user gesture such as a
click, but if you attempt to unmute a video programmatically without a user gesture, playback will pause.
muted autoplay change will also make it possible to use
play() with a
video element not created in the DOM, for example to drive WebGL playback.
Why the change?
Autoplay was disabled in previous versions of Chrome on Android because it can be disruptive, data-hungry and many users don't like it.
Disabling autoplay had the unintended effect of driving developers to alternatives such as animated GIFs, as well as
Compare the following — the first is a video and the second is an animated GIF:
They look pretty similar, but the video is less than 200KB in size and the animated GIF is over 900KB.
Chrome and other browser vendors are extremely cautious about user bandwidth. For many users in many contexts high data cost is often a greater barrier to access than poor connectivity. Given the prevalence of workarounds, muted autoplay isn't something that can be blocked, so offering good APIs and defaults is the best the platform can do.
The web is increasingly media centric. Designers and developers continue to find new and unforeseen ways to use video — and they want consistent behavior across platforms, for example when using background video as a design element. Muted autoplay enables functionality like this on both mobile and desktop.
The finer points
- From an accessibility viewpoint, autoplay can be particularly problematic. Chrome 53 and above on Android provide a setting to disable autoplay completely: from Media settings, select Autoplay.
- This change does not affect the
audioelement: autoplay is still disabled on Chrome on Android, because muted autoplay doesn't make much sense for audio.
- There is no autoplay if Data Saver mode is enabled. If Data Saver mode is enabled, autoplay is disabled in Media settings.
- Muted autoplay will work for any visible video element in any visible document, iframe or otherwise.
- Remember that to take advantage of the new behavior, you'll need to add
mutedas well as
autoplay: compare simpl.info/video with simpl.info/video/muted.
- Muted autoplay is supported by Safari on iOS 10 and later.
- Autoplay, whether muted or not, is already supported on Android by Firefox and UC Browser: they do not block any kind of autoplay.