There is a follow-up to this blog post.
Based on Steve Souders' blog post on video preload, I have been telling people that autoplay does not work on mobile.
Recently, the inevitable happened. I had to implement an autoplaying background video for a project. A background video did not make much sense on mobile, because it would use up a lot of bandwidth.
Modernizr offers a way to feature detect autoplay. It tries to start a video and after a timeout checks if the video is actually playing. Not a very lightweight test. So I settled on "good old" browser sniffing to detect a mobile browser and only serve video to desktop browsers.
Then I discovered that Windows Phone actually supports autoplay. So feature detection would not have been helpful in this case.
So I created an autoplay video page and did some more testing on mobile using the following code:
<video controls autoplay loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
Turns out that support differs greatly. I even tested on a WebOS phone, although the OS is now only available for LG Smart TVs.
Browser/OS | Supports autoplay |
---|---|
iOS Safari 600 | no |
iOS Chrome 43 | no |
Android Chrome 43 | no |
Android 4.2 Browser | no |
Android Opera 30 | no |
Android Firefox 39 | yes |
Windows Phone 7 | no |
Windows Phone 8 | no |
Windows Phone 8.1 | yes |
Windows Phone 10 | no |
Blackberry 6 | yes |
FirefoxOS 1.1 | yes |
Opera Mini 10.2 | no |
WebOS 2.1 | yes |
Kindle Silk Browser 3.44 | no |
So browser sniffing seems to be the only "good" solution for serving autoplaying videos.
[update]
You can make videos playable inline on Safari on iPhone and iPod touch with JavaScript.