Bug 162366 - Allow multiple playing videos on a page with 'autoplay' and 'playsinline' attributes
: Allow multiple playing videos on a page with 'autoplay' and 'playsinline' att...
Status: RESOLVED FIXED
Product: WebKit
Classification: Unclassified
Component: Media Elements
: WebKit Nightly Build
: iPhone / iPad iOS 10
: P2 Normal
Assigned To: Jer Noble
: InRadar
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2016-09-21 16:44 PDT by huskyr
Modified: 2017-02-21 10:00 PST (History)
16 users (show)

See Also:


Attachments
Patch (180.44 KB, patch)
2016-10-28 09:42 PDT, Jer Noble
no flags Details | Formatted Diff | Diff
Patch (180.44 KB, patch)
2016-10-28 10:12 PDT, Jer Noble
eric.carlson: review+
buildbot: commit‑queue-
Details | Formatted Diff | Diff
Archive of layout-test-results from ews104 for mac-yosemite-wk2 (1.05 MB, application/zip)
2016-10-28 11:17 PDT, Build Bot
no flags Details
Archive of layout-test-results from ews103 for mac-yosemite (1.04 MB, application/zip)
2016-10-28 11:51 PDT, Build Bot
no flags Details
Archive of layout-test-results from ews113 for mac-yosemite (1.72 MB, application/zip)
2016-10-28 13:24 PDT, Build Bot
no flags Details
Patch for landing (186.65 KB, patch)
2016-10-28 17:52 PDT, Jer Noble
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description huskyr 2016-09-21 16:44:27 PDT
In a recent blogpost on the Webkit blog (https://webkit.org/blog/6784/new-video-policies-for-ios/) 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 https://twitter.com/jernoble/status/778619308385509377). 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: http://codepen.io/hay/pen/xERaVB
Comment 1 Radar WebKit Bug Importer 2016-10-05 14:27:28 PDT
<rdar://problem/28639600>
Comment 2 Jer Noble 2016-10-06 09:17:05 PDT
This comes down to the following line in MediaSessionManagerIOS.mm:
156:    addRestriction(PlatformMediaSession::Video, ConcurrentPlaybackNotPermitted);

We add a "no concurrent playback" restriction for all <video> elements. We'll need to come up with something more dynamic now that inline autoplaying of silent <video> elements is allowed.
Comment 3 Ricky Blaha 2016-10-12 11:35:09 PDT
+1

We're trying to use the playsinline attribute and the new muted scripted autoplay at AOL Platforms for ads, but for iOS may not be able to since video can't reliably autoplay when either the publisher page or another ad also has an autoplay video.

Android Chrome 53 allows inline autoplay of multiple videos concurrently.
Comment 4 Evol Greaves 2016-10-17 15:46:03 PDT
+2.

JW Player's publishers have been clamoring for this feature.
Comment 5 João Machado 2016-10-20 09:08:14 PDT
(In reply to comment #3)
> +1
> 
> We're trying to use the playsinline attribute and the new muted scripted
> autoplay at AOL Platforms for ads, but for iOS may not be able to since
> video can't reliably autoplay when either the publisher page or another ad
> also has an autoplay video.
> 
> Android Chrome 53 allows inline autoplay of multiple videos concurrently.

+1
Comment 6 Jer Noble 2016-10-28 09:42:31 PDT
Created attachment 293166 [details]
Patch
Comment 7 Eric Carlson 2016-10-28 10:02:32 PDT
Comment on attachment 293166 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=293166&action=review

> Source/WebCore/platform/audio/ios/MediaSessionManagerIOS.mm:156
> -    addRestriction(PlatformMediaSession::Video, ConcurrentPlaybackNotPermitted);
> +    removeRestriction(PlatformMediaSession::Video, ConcurrentPlaybackPermitted);

There is no ConcurrentPlaybackPermitted flag, only ConcurrentPlaybackNOTPermitted. Did you mean to add a new flag or is this backwards?

> Source/WebCore/platform/audio/ios/MediaSessionManagerIOS.mm:159
> +    addRestriction(PlatformMediaSession::AudioVideo, ConcurrentPlaybackPermitted);

Ditto.
Comment 8 Jer Noble 2016-10-28 10:12:36 PDT
Created attachment 293171 [details]
Patch
Comment 9 Jer Noble 2016-10-28 10:13:12 PDT
(In reply to comment #7)
> Comment on attachment 293166 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=293166&action=review
> 
> > Source/WebCore/platform/audio/ios/MediaSessionManagerIOS.mm:156
> > -    addRestriction(PlatformMediaSession::Video, ConcurrentPlaybackNotPermitted);
> > +    removeRestriction(PlatformMediaSession::Video, ConcurrentPlaybackPermitted);
> 
> There is no ConcurrentPlaybackPermitted flag, only
> ConcurrentPlaybackNOTPermitted. Did you mean to add a new flag or is this
> backwards?

Nope, just fat-fingered. I fixed this locally, but the change didn't make it into the patch. New version uploaded.

> > Source/WebCore/platform/audio/ios/MediaSessionManagerIOS.mm:159
> > +    addRestriction(PlatformMediaSession::AudioVideo, ConcurrentPlaybackPermitted);
> 
> Ditto.
Comment 10 Build Bot 2016-10-28 11:17:50 PDT
Comment on attachment 293171 [details]
Patch

Attachment 293171 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.webkit.org/results/2393829

New failing tests:
media/video-background-playback.html
Comment 11 Build Bot 2016-10-28 11:17:53 PDT
Created attachment 293179 [details]
Archive of layout-test-results from ews104 for mac-yosemite-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: ews104  Port: mac-yosemite-wk2  Platform: Mac OS X 10.10.5
Comment 12 Build Bot 2016-10-28 11:51:55 PDT
Comment on attachment 293171 [details]
Patch

Attachment 293171 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.webkit.org/results/2394030

New failing tests:
media/video-background-tab-playback.html
media/video-background-playback.html
Comment 13 Build Bot 2016-10-28 11:51:59 PDT
Created attachment 293180 [details]
Archive of layout-test-results from ews103 for mac-yosemite

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: ews103  Port: mac-yosemite  Platform: Mac OS X 10.10.5
Comment 14 Jer Noble 2016-10-28 12:21:02 PDT
(In reply to comment #13)
> Created attachment 293180 [details]
> Archive of layout-test-results from ews103 for mac-yosemite
> 
> The attached test failures were seen while running run-webkit-tests on the
> mac-ews.
> Bot: ews103  Port: mac-yosemite  Platform: Mac OS X 10.10.5

Will fix these tests before landing.
Comment 15 Build Bot 2016-10-28 13:24:40 PDT
Comment on attachment 293171 [details]
Patch

Attachment 293171 [details] did not pass mac-debug-ews (mac):
Output: http://webkit-queues.webkit.org/results/2394411

New failing tests:
media/video-background-playback.html
Comment 16 Build Bot 2016-10-28 13:24:44 PDT
Created attachment 293196 [details]
Archive of layout-test-results from ews113 for mac-yosemite

The attached test failures were seen while running run-webkit-tests on the mac-debug-ews.
Bot: ews113  Port: mac-yosemite  Platform: Mac OS X 10.10.5
Comment 17 Jer Noble 2016-10-28 17:52:43 PDT
Created attachment 293261 [details]
Patch for landing
Comment 18 WebKit Commit Bot 2016-10-31 09:38:56 PDT
Comment on attachment 293261 [details]
Patch for landing

Clearing flags on attachment: 293261

Committed r208149: <http://trac.webkit.org/changeset/208149>
Comment 19 Jason Ormand 2016-11-21 22:04:33 PST
Hey, Jason Ormand from Vox Media here. Thanks for all the work on this issue thus far!

It appears there is traction and possibly a patch in the queue. But I wanted to +1 this issue and ensure it's getting plenty of attention.

This feature/bug is preventing us from shipping GIFs as videos to all of our sites. We can obviously save users torrents of bytes over the wire by using videos instead of GIFs. But we really need this to work. Using something like intersection observer/shim might be possible but we will definitely have more than one video in the viewport at a time so it would be impossible to fully emulate a GIF-like experience.

I look forward to throwing the ON switch for this new feature and saving the internet and iPhone users many terabytes of data, much battery and giving smoother playback.

Happy to assist if I can : )
Comment 20 w0ts0n 2017-01-08 22:26:10 PST
Wanted to weigh in and say that I'm running into this bug. I want to convert my site from gifs to html5 video and currently the first video pauses. 

Hopefully you can land that patch soon.
Comment 21 Jer Noble 2017-01-09 11:00:12 PST
(In reply to comment #20)
> Wanted to weigh in and say that I'm running into this bug. I want to convert
> my site from gifs to html5 video and currently the first video pauses. 
> 
> Hopefully you can land that patch soon.

The patch is landed, and if you have a developer.apple.com account, you can follow the instructions at <https://webkit.org/blog/3457/building-webkit-for-ios-simulator/> to build WebKit for the iOS Simulator and test the new behavior against your site.  It would be great to verify that this patch fixes the behavior you're seeing before the fix comes to an iOS update.
Comment 22 w0ts0n 2017-01-09 14:51:12 PST
I ran the instructions to build WebKit for the iOS Simulator and I'm still running into the same issue on the simulator.

Release-iphonesimulator.
com.apple.mobilesafari: 31123
webkit version reported: 602.3.12
Tested on: http://codepen.io/hay/pen/xERaVB

Let me know if I missed something.
Comment 23 Jer Noble 2017-01-10 00:31:22 PST
(In reply to comment #22)
> I ran the instructions to build WebKit for the iOS Simulator and I'm still
> running into the same issue on the simulator.
> 
> Release-iphonesimulator.
> com.apple.mobilesafari: 31123
> webkit version reported: 602.3.12
> Tested on: http://codepen.io/hay/pen/xERaVB
> 
> Let me know if I missed something.

I suspect you're still running against the shipping WebKit framework rather than your built framework, as 602.3.12 is a pretty old tag. Tip-of-tree should be 604.1.3 or so. If you jump on #webkit, we may be able to help you get your configuration sorted to help verify this.
Comment 24 w0ts0n 2017-01-18 18:24:32 PST
Got help in #webkit and confirmed the patch works as expected. 
R+
Comment 25 Brian Burg 2017-02-21 10:00:03 PST
Moving to FIXED, patch has landed.