iOS 10 promises better video handling in Safari, but doesn’t deliver
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.
do you know if it possible to play video inline in a WKwebview?
It was very disappointing, to say the least. Hope the guys at Apple look into this before releasing iOS 11
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.
IOS should now focus on better user experience