HTML5 video autoplay on mobile

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.