There have been some changes since the last time I tested autoplay videos. Animated GIFs have become popular, because they work on mobile. A problem is that animated GIFs can become very large. A video is typically a lot smaller. That is why Apple and Google decided to allow autoplay in their mobile browsers. But only if videos are
muted. On iOS you also have to set the
playsinline attribute, because by default videos will play fullscreen.
To get autoplay use the following setup:
<video controls autoplay loop muted playsinline> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video>
My tests show that the latest mobile browsers now support autoplay with the exception of MS Edge.
[update] Opera Mini on iOS 10 supports autoplay, but plays the video fullscreen. Other versions do not autoplay as one would expect from a proxy browser.
[update] Firefox on iOS does not support autoplay. This is very different from Firefox on Android that supports autoplay even with sound.
[update] On Samsung devices, the default browser is Samsung Internet. It is uses the same basis as Chrome, but it’s not updated as frequently.
|iOS 9 Safari 601||no|
|iOS 10 Safari 602||yes (with muted + playsinline attributes)|
|iOS 9 Chrome 54||no|
|iOS 10 Chrome 54||yes (with muted + playsinline attributes)|
|iOS 9 Opera Mini 14||no|
|iOS 10 Opera Mini 14||yes (plays fullscreen)|
|iOS 9 Firefox 5.3||no|
|iOS 10 Firefox 5.3||no|
|Android Chrome 43||no|
|Android Chrome 54||yes (with muted attribute)|
|Android Opera Mini 20||no|
|Android Firefox 49||yes|
|Android Samsung Internet 4.0||no|
|Windows Phone 8 IEMobile 10||no|
|Windows Phone 8.1 IEMobile 11||yes|
|Windows 10 Mobile Edge 14.1||no|
|Windows 10 Mobile Opera Mini 9.1||no|
You can test for yourselves on my autoplay test pages:
- HTML5 autoplay video muted
- HTML5 autoplay video muted + playsinline
- HTML5 autoplay video with sound + playsinline
Of course, you do not have to use autoplaying videos everywhere.