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/OSSupports autoplay
iOS Safari 600no
iOS Chrome 43no
Android Chrome 43no
Android 4.2 Browserno
Android Opera 30no
Android Firefox 39yes
Windows Phone 7no
Windows Phone 8no
Windows Phone 8.1yes
Windows Phone 10no
Blackberry 6yes
FirefoxOS 1.1yes
Opera Mini 10.2no
WebOS 2.1yes
Kindle Silk Browser 3.44no

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.