iOS 10 promises better video handling in Safari, but doesn’t deliver

4 comments

iphone-animated-gif-22

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 playsinline videos.

As a web developer, for anything else than a really basic use case, this is very frustrating. The only way i can imagine to get proper GIF-like behaviour with the current implementation is to have some Javascript running to check whether the GIF is in the viewport and then toggle the current playing video, which is pretty complex and error-prone compared to just using regular GIF images.

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.

Add a comment

4 comments