Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support "Auto Picture-in-Picture" #112

Merged
merged 7 commits into from
Jan 25, 2019
Merged

Support "Auto Picture-in-Picture" #112

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
90c84eb
Support "Auto Picture-in-Picture"
beaufortfrancois Dec 6, 2018
8b65297
Fix nits
beaufortfrancois Jan 7, 2019
7e05da5
Fix nits #2
beaufortfrancois Jan 7, 2019
657f597
Fix nits #3
beaufortfrancois Jan 8, 2019
e5b00e4
Add potentially playing restriction
beaufortfrancois Jan 15, 2019
af432f6
Add note about disablepip
beaufortfrancois Jan 17, 2019
3b17c21
Replace "potentially playing" by paused
beaufortfrancois Jan 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
82 changes: 63 additions & 19 deletions index.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,8 +169,9 @@ extensible.

## Request Picture-in-Picture ## {#request-pip}

When the <dfn>request Picture-in-Picture algorithm</dfn> with |video| is
invoked, the user agent MUST run the following steps:
When the <dfn>request Picture-in-Picture algorithm</dfn> with |video|,
|userActivationRequired| and |playingRequired| is invoked, the user agent MUST
run the following steps:

1. If <a>Picture-in-Picture support</a> is `false`, throw a
{{NotSupportedError}} and abort these steps.
Expand All @@ -182,13 +183,15 @@ invoked, the user agent MUST run the following steps:
these steps.
5. OPTIONALLY, if the {{disablePictureInPicture}} attribute is present on
|video|, throw a {{InvalidStateError}} and abort these steps.
6. If the algorithm is not <a>triggered by user activation</a>, throw a
{{NotAllowedError}} and abort these steps.
6. If |userActivationRequired| is `true` and the algorithm is not
<a>triggered by user activation</a>, throw a {{NotAllowedError}} and
abort these steps.
7. If |video| is {{pictureInPictureElement}}, abort these steps.
8. Set {{pictureInPictureElement}} to |video|.
9. Let <dfn>Picture-in-Picture window</dfn> be a new instance of
8. If |playingRequired| is `true` and |video| is {{paused}}, abort these steps.
9. Set {{pictureInPictureElement}} to |video|.
10. Let <dfn>Picture-in-Picture window</dfn> be a new instance of
{{PictureInPictureWindow}} associated with {{pictureInPictureElement}}.
10. <a>Queue a task</a> to <a>fire an event</a> with the name
11. <a>Queue a task</a> to <a>fire an event</a> with the name
{{enterpictureinpicture}} at the |video| with its {{bubbles}} attribute
initialized to `true` and its {{pictureInPictureWindow}} attribute
initialized to <a>Picture-in-Picture window</a>.
Expand Down Expand Up @@ -242,10 +245,8 @@ context menu or to request Picture-in-Picture automatically in some cases.
To support these use cases, a new {{disablePictureInPicture}} attribute is
added to the list of content attributes for video elements.

A corresponding {{disablePictureInPicture}} IDL attribute which reflects the
value of element’s {{disablePictureInPicture}} content attribute is added to
the {{HTMLVideoElement}} interface. The {{disablePictureInPicture}} IDL attribute
MUST <a>reflect</a> the content attribute of the same name.
The {{disablePictureInPicture}} IDL attribute MUST <a>reflect</a> the content
attribute of the same name.

If the {{disablePictureInPicture}} attribute is present on the video element,
the user agent SHOULD NOT play the video element in Picture-in-Picture or
Expand All @@ -259,6 +260,46 @@ the user agent SHOULD run these steps:
2. If |video| is {{pictureInPictureElement}}, run the <a>exit
Picture-in-Picture algorithm</a>.

## Auto Picture-in-Picture ## {#auto-pip}

<em>The paragraph below is non-normative.</em>

Some pages may want to automatically enter and leave Picture-in-Picture for
a video element; for example, video meetings web apps would benefit from
some automatic Picture-in-Picture behavior when user switches back and forth
between the web app and other applications/tabs.
To support these use cases, a new {{autoPictureInPicture}} attribute is
added to the list of content attributes for video elements.
beaufortfrancois marked this conversation as resolved.
Show resolved Hide resolved

The {{autoPictureInPicture}} IDL attribute MUST <a>reflect</a> the content
attribute of the same name.

The <dfn>autoPictureInPictureElement</dfn> is the video element, among all
video elements with the {{autoPictureInPicture}} attribute currently set,
whose {{autoPictureInPicture}} attribute was set most recently. Note that the
beaufortfrancois marked this conversation as resolved.
Show resolved Hide resolved
<a>autoPictureInPictureElement</a> can have the {{disablePictureInPicture}}
attribute set. In that case, as expected, it won't be allowed to enter
Picture-in-Picture in the <a>request Picture-in-Picture algorithm</a>.

When the visibility state of a <a>top-level browsing context</a> value
switches from "visible" to "hidden", the user agent MAY run these steps:

1. If <a>autoPictureInPictureElement</a> is null, abort these steps.
beaufortfrancois marked this conversation as resolved.
Show resolved Hide resolved
2. If {{pictureInPictureElement}} is set, abort these steps.
3. Let |video| be <a>autoPictureInPictureElement</a>.
4. Let |userActivationRequired| be `false`.
5. Let |playingRequired| be `true`.
6. Run the <a>request Picture-in-Picture algorithm</a> with |video|,
|userActivationRequired|, and |playingRequired|.

When the visibility state of a <a>top-level browsing context</a> value
switches from "hidden" to "visible", the user agent MAY run these steps:

1. If <a>autoPictureInPictureElement</a> is null, abort these steps.
2. Let |video| be <a>autoPictureInPictureElement</a>.
3. If |video| is {{pictureInPictureElement}}, run the <a>exit
Picture-in-Picture algorithm</a>.

## Interaction with Remote Playback ## {#remote-playback}

The [[Remote-Playback]] specification defines a <a>local playback device</a>
Expand All @@ -279,9 +320,8 @@ SHOULD provide a way for users to manually close the Picture-in-Picture window.

The [[Page-Visibility]] specification defines a {{Document/visibilityState}}
attribute used to determine the visibility state of a <a>top-level browsing
context</a>. For the purpose of Picture-in-Picture, the
{{Document/visibilityState}} MUST always return "visible" when
{{pictureInPictureElement}} is set.
context</a>. The Picture-in-Picture window visibility MUST NOT be taken into
account when determining the value returned by {{Document/visibilityState}}.

## One Picture-in-Picture window ## {#one-pip-window}

Expand Down Expand Up @@ -310,6 +350,7 @@ partial interface HTMLVideoElement {
attribute EventHandler onenterpictureinpicture;
attribute EventHandler onleavepictureinpicture;

[CEReactions] attribute boolean autoPictureInPicture;
[CEReactions] attribute boolean disablePictureInPicture;
};
</xmp>
Expand All @@ -319,10 +360,13 @@ return <a>a new promise</a> |promise| and run the following steps <a>in
parallel</a>:

1. Let |video| be the video element on which the method was invoked.
2. Run the <a>request Picture-in-Picture algorithm</a> with |video|.
3. If the previous step threw an exception, reject |promise| with that
2. Let |userActivationRequired| be `true`.
3. Let |playingRequired| be `false`.
4. Run the <a>request Picture-in-Picture algorithm</a> with |video|,
|userActivationRequired|, and |playingRequired|.
5. If the previous step threw an exception, reject |promise| with that
exception and abort these steps.
4. Return |promise| with the <a>Picture-in-Picture window</a> associated with
6. Return |promise| with the <a>Picture-in-Picture window</a> associated with
{{pictureInPictureElement}}.

## Extensions to <code>Document</code> ## {#document-extensions}
Expand Down Expand Up @@ -451,5 +495,5 @@ The <a>default allowlist</a> for this feature is `*`.
# Acknowledgments # {#acknowledgments}

Thanks to Jennifer Apacible, Zouhir Chahoud, Marcos Cáceres, Philip Jägenstedt,
Jeremy Jones, Jer Noble, Yoav Weiss, and Eckhart Wörner for their contributions
to this document.
Jeremy Jones, Jer Noble, Justin Uberti, Yoav Weiss, and Eckhart Wörner for
their contributions to this document.