Say goodbye to <canvas> hacks and animated GIFs! with muted autoplay on mobile
Author: Sam Dutton
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 autoplay and muted are set, and playback of muted videos can be initiated progamatically 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" />
</video>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.
The 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.
The play() method also returns a promise, which can be used to check whether muted programmatic playback is enabled. There is an example of this at http://simpl.info/video/scripted/.
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 <canvas> and <img> hacks. These techniques are much worse than optimized video in terms of power consumption, performance, bandwidth requirements, data cost and memory usage. Video can provide higher quality than animated GIFs, with far better compression: around 10 times on average, and up to 100 times at best. Video decoding in JavaScript is possible, but it’s a huge drain on battery power.
Compare the following — the first is a video and the second is an animated GIF:
(Editor note: Dammit — Medium does not support the video element)
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 behaviour 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 audio element: 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 behaviour, you’ll need to add muted as well as autoplay: compare simpl.info/video with http://simpl.info/video/muted/.
Support
- 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.
Find out more
Originally published on Web Updates — Google Developers
