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">

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.

You can make videos playable inline on Safari on iPhone and iPod touch with JavaScript.