Update: this issue seems to have been fixed in iOS 10.3!
I’ve written before about all the caveats with using multimedia files on mobile devices. Especially iOS Safari on iPhone is a difficult beast to tackle: videos can’t autoplay, and they’re restricted to playing fullscreen. So, if we want to do ‘background video’ without audio on mobile we’re basically still restricted to the honourable (but outdated) animated GIF format.
iOS 10 promised some improvements on that. In a recent blogpost on the Webkit blog the
playsinline attribute, in combination with the
autoplay attribute is named as a way to replace the animated GIF format.
Unfortunately, the current implementation of
playsinline/autoplay on iOS Safari makes it very hard to use the <video> tag as a GIF replacement. Characteristics of GIFs are that they’re muted, looping, autoplaying and play inline.
Crucially, there can be many GIFs playing on the same page.
Unfortunately, iOS Safari doesn’t seem able to play more than one <video> element at the same time. Of course, this wasn’t very noticeable given that inline video was impossible on the iPhone anyway. However, when using the new playsinline/autoplay combination on more than one video on a page this becomes noticeable immediately given that only one video will start playing. The other ones can’t even play because the play button is disabled on
I’ve filed a bug with Webkit, so it might be fixed sometime in the future. But for now, this change seems to be just another hack we can add to the endless list of workarounds instead of a true solution.