Allow inline videos to be played in Firefox for iOS

ASSIGNED
Assigned to

Status

()

Firefox for iOS
Browser
P3
normal
Rank:
20
ASSIGNED
2 years ago
7 months ago

People

(Reporter: cvan, Assigned: cvan)

Tracking

unspecified
All
iOS

Firefox Tracking Flags

(fxios+)

Details

(Whiteboard: [needstrings])

Attachments

(3 attachments, 1 obsolete attachment)

48 bytes, text/x-github-pull-request
sleroux
: feedback+
Details | Review | Splinter Review
48 bytes, text/x-github-pull-request
sleroux
: feedback+
Details | Review | Splinter Review
55 bytes, text/x-github-pull-request
Mitch
: review?
st3fan
Details | Review | Splinter Review
(Assignee)

Description

2 years ago
When `webkit-playsinline` is set on a `<video>` element, videos should be played inline.

The Safari for iOS[1] and Chrome for iOS[2] browsers do not support inline videos. In order to play an inline video, you must create (or install) a custom native app that is a webview that allows inline video playback - or you must launch a webapp from iOS' Safari standalone browser (if a web page has the correct `meta[name="apple-mobile-web-app-capable"]` tag).

For old historical reasons[3], Safari for iOS does not allow inline videos to be played even when `webkit-playsinline` is set on a `<video>` element. Based on my research, the original reason was that most web sites playing inline video were 2D, non-mobile-optimised sites that played videos in containers that were of less-than-ideal dimensions. Since then, WebGL has been introduced and mobile/responsive sites are now prevalent.

Modern-day use cases for inline video include video projected in 3D perspectives. Especially important is the Cardboard WebVR use case. There are many folks trying to play 360° video in a web browser, but only Android browsers provide that experience today.

As a member of the WebVR team here at Mozilla, we're approached by 3-5 folks per day in our Slack who want to play inline video on iOS but cannot (or do not understand why it's not possible – without the "Add to Homescreen" workaround or `<video>`-to-`<canvas>` hacks). I cannot name all the names here, but there are many agencies, individuals, and publications that want to see a browser properly support inline video playback for WebVR experiences (one in particular that recently blogged frustration about this is The Washington Post[4]). This is also an issue often brought up in the three.js community [5].

It would be a definite **huge** win if Firefox for iOS were to be the first browser for iOS that supported inline (and autoplay-by-default) video playback.

For what it's worth, Firefox for Android already allows videos to be autoplayed by default (Chrome for Android does not). And Firefox for Android has a user setting that allows autoplay to be toggled - in the event that the user encounters some sites that maliciously take advantage of this.

I propose that inline video playback be supported in Firefox for iOS if `webkit-playsinline` is set on a `<video>` element and that autoplay video playback be enabled by default but toggle-able by a user setting.

––
[1] https://bugs.webkit.org/show_bug.cgi?id=135379
[2] https://crbug.com/395206
[3] https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
[4] https://developer.washingtonpost.com/pb/blog/post/2016/03/11/vr-for-all/
[5] https://github.com/mrdoob/three.js/issues/8110
(Assignee)

Updated

2 years ago
tracking-fxios: --- → ?
(Assignee)

Comment 1

2 years ago
Created attachment 8732717 [details] [review]
Pull request
Attachment #8732717 - Flags: review?
Attachment #8732717 - Flags: review? → review?(sleroux)
Comment on attachment 8732717 [details] [review]
Pull request

Thanks for the patch Chris! I left some comments on the patch in Github.
Attachment #8732717 - Flags: feedback+
Assignee: nobody → cvan
Status: NEW → ASSIGNED
(Assignee)

Comment 3

2 years ago
Created attachment 8733179 [details] [review]
Pull request

Thanks for the feedback!

I've addressed the comments; I am now using the media playback properties for iOS 9 and the deprecated ones for iOS 8.
Attachment #8733179 - Flags: review?(sleroux)
Rank: 4
tracking-fxios: ? → +
Sorry for the lack of additional feedback on this bug. The code looks good but I would be more comfortable if this was paired with a test to verify the behavior of inline videos when toggling the switch. A UITest would be good to use here. We use KIF (https://github.com/kif-framework/KIF) which makes it easy to simulate touches in the app by using accessibility labels. We have a collection of these tests under the UITests folder that you can use as a reference.
Attachment #8733179 - Flags: feedback+
Attachment #8732717 - Flags: review?(sleroux)
:sleroux, what do you think about landing this for 5.0?
Flags: needinfo?(sleroux)
Rank: 4 → 8
tracking-fxios: + → 5.0+
Whiteboard: [needstrings]
We can land it for 5.0 and I'll file a follow up for tests.
Flags: needinfo?(sleroux)
Status?
tracking-fxios: 5.0+ → 6.0+
Rank: 8 → 20
tracking-fxios: 6.0+ → +
Priority: -- → P3

Comment 8

9 months ago
Created attachment 8847352 [details] [review]
Pull request

Hi all, we are building a web app with inline video and autoplay features and ran into some issues - to support this feature and as this branch seemed to be closed and in-active I have re-PR'd with slight updates for swift 3.0.

Original credit to cvan: https://github.com/mozilla-mobile/firefox-ios/pull/1651

Let me know if anything else is needed, keen to help get this feature rolled out!
Attachment #8847352 - Flags: review?(sarentz)
> The Safari for iOS[1] and Chrome for iOS[2] browsers do not support inline videos.

I think this changed with with iOS 10. See the following article, which also has an inline video as a demo.

  https://9to5mac.com/2016/06/15/ios-10-inline-video-playback-safari/

On Safari on iOS 10 this correctly plays inline.

On Firefox, the video player is opened full screen.



How about a much smaller patch, where we just set:

  configuration.allowsInlineMediaPlayback = true

That will give us Safari parity and will let the website choose if the video should play inline or not. I do not think we need to add a setting as this is the expected new behaviour on iOS.


I think we should also set the following two to enabled:

  allowsPictureInPictureMediaPlayback
  allowsAirPlayForMediaPlayback

I think this is expected behaviour. They are disabled by default on a WKWebView, but both these features have been prominently marketed by Apple and users expect them to be available. These features also require an explicit user action to enable when playing video, so I do not think they require a setting/preference.
I just want to emphasize that I would prefer to do 'the right thing / expected behaviour / Safari parity' without adding more user controllable settings.

Comment 11

9 months ago
That makes sense, I'll update the PR shortly.

Comment 12

8 months ago
Created attachment 8855558 [details] [review]
Pull request

Set preferences on tab creation to allow Picture in picture, inline playback and airplay on iOS10
Attachment #8847352 - Attachment is obsolete: true
Attachment #8847352 - Flags: review?(sarentz)
Attachment #8855558 - Flags: review?(sarentz)
Attachment #8733179 - Flags: review?(sleroux)
You need to log in before you can comment on or make changes to this bug.