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

• erik 2016-11-28 on 10:32

  do you know if it possible to play video inline in a WKwebview?

• Jason Williams 2017-02-07 on 09:48

  It was very disappointing, to say the least. Hope the guys at Apple look into this before releasing iOS 11

• alex 2017-03-16 on 04:08

  I wanted to have two videos playing inline simultaneously on iOS. Thanks for your post, it confirmed that autoplay on iOS 10 works only for one video at a time.

  I used Hammer.js as a less than perfect but ok solution. I detect a \”panend\”, i.e. the end of a scroll on a touch device, and use that to fire a \”play\” instruction to the video that is not playing.

  So for the user, she sees that the video that is playing alternates every time she swipes.

  For my use case, close enough and is better than GIF because GIF files are way too big vs mp4.

• Martin 2017-04-08 on 12:00

  IOS should now focus on better user experience