<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Allow multiple playing videos on a page with 'autoplay' and 'playsinline' attributes"
href="https://bugs.webkit.org/show_bug.cgi?id=162366">162366</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Allow multiple playing videos on a page with 'autoplay' and 'playsinline' attributes
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iPhone / iPad
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 10
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Media Elements
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>huskyr@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>In a recent blogpost on the Webkit blog (<a href="https://webkit.org/blog/6784/new-video-policies-for-ios/">https://webkit.org/blog/6784/new-video-policies-for-ios/</a>) the 'playsinline' attribute, in combination with the 'autoplay' attribute is named as a way to replace the animated GIF format. Animated GIFs are not the best format for moving images because they tend to be a lot bigger than comparable MP4 files and have a maximum of 256 colors.
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 inline. Crucially for this bug report, there can be many GIFs on the same page playing page. Unfortunately, iOS Safari doesn't seem able to play more than one <video> element at the same time (see <a href="https://twitter.com/jernoble/status/778619308385509377">https://twitter.com/jernoble/status/778619308385509377</a>). 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 usecase ,this is very frustrating. The only way i can imagine to get 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.
A testcase with two videos is available here: <a href="http://codepen.io/hay/pen/xERaVB">http://codepen.io/hay/pen/xERaVB</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>