Intent to Ship: Picture-in-Picture (PiP)

[François Beaufort]

Contact emails

fbea...@chromium.org, apac...@chromium.org, mlam...@chromium.org

Explainer

https://github.com/WICG/picture-in-picture/blob/master/explainer.md

Spec

Specification: https://wicg.github.io/picture-in-picture/

Tag Review: https://github.com/w3ctag/design-reviews/issues/226

Summary

Allow websites to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites, or applications on their device.

Link to “Intent to Implement” blink-dev discussion

https://groups.google.com/a/chromium.org/d/msg/blink-dev/U8Apo-WLBm4/03sO4ITYAQAJ

Link to Origin Trial feedback summary

https://groups.google.com/a/chromium.org/d/msg/blink-dev/xQiDYZEnwaA/MNGbYJnaBwAJ

The Origin Trial was dropped. We mostly wanted to help web developers setup their websites and get feedback for a next version of the API. We now have gathered strong interest from external partners.

Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

The feature will be supported on all platforms (except Android WebView).

It may launch first without Android as frontend is quite different.

Demo link

https://googlechrome.github.io/samples/picture-in-picture/

Risks

Interoperability and Compatibility

Safari has shipped a vendor-prefixed API for Picture-in-Picture and we’ve been working with them on this specification to make sure this API is compliant with their implementation.

Edge: No signals (although have been involved in discussions about spec)

Firefox: Public support (but don't have bandwidth to implement or send spec comments)

Safari: Public support

Web developers: Positive (multiple partners lined up)

Ergonomics

The API is currently limited to video elements. It will be extended in a future version to allow custom controls on the PIP window.

Activation

It will be very easy for web developers to add a custom PiP button to their video players. And they will even be able to use a polyfill to handle the Safari vendor-prefixed API for backward compatibility. It will also be covered by developer documentation at https://developers.google.com/web/updates/.

Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.

https://github.com/web-platform-tests/wpt/tree/master/picture-in-picture
https://wpt.fyi/results/picture-in-picture

https://github.com/web-platform-tests/wpt/tree/master/feature-policy
https://wpt.fyi/results/feature-policy

Link to entry on the feature dashboard

https://www.chromestatus.com/features/5729206566649856

[Andy Paicu]

If the OS or implementation does not restrict the number of PIP windows is there a concern for sites using this to spam PIP windows?

I see that there is a 1 PIP window per document restriction but is there anything that prevents sites from using subframes to bypass the restriction?

Do we limit the number of windows to 1 in our implementation or are there other measures in place to address this?

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAEZxfGM%3DCFYtv7PROedeY43UP1okZ%2B8sE68H02mx5ZjatjBTLg%40mail.gmail.com.

--

Regards,

Andy Paicu

[François Beaufort]

Chrome implementation of Picture-in-Picture can only have one and unique window.
https://chromium.googlesource.com/chromium/src/+/2e9a253df86bf18beaa55b5062fbf37884493bbf/chrome/browser/ui/browser.cc#1420

Note that requesting Picture-in-Picture also requires a user gesture.

https://chromium.googlesource.com/chromium/src/+/2e9a253df86bf18beaa55b5062fbf37884493bbf/third_party/blink/renderer/modules/picture_in_picture/html_video_element_picture_in_picture.cc#84

[紫云飞]

Chrome implementation of Picture-in-Picture can only have one and unique window.

 per browser window? If you open multiple browser windows then you can open multiple PiP windows?

[François Beaufort]

Per browser window is tip of tree but not the behavior we are going for.
We'll have a one and unique window for all browser windows.

[紫云飞]

The PiP window is currently fixed in the bottom right corner, I wonder if there is a possibility that users can move it to other corners or even move it freely to any position?

[François Beaufort]

Users can drag and move the Picture-in-Picture window freely to any position.

On Wed, Jun 20, 2018 at 5:25 AM 紫云飞 <l4462...@gmail.com> wrote:

The PiP window is currently fixed in the bottom right corner, I wonder if there is a possibility that users can move it to other corners or even move it freely to any position?

--
You received this message because you are subscribed to a topic in the Google Groups "blink-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/a/chromium.org/d/topic/blink-dev/ibVPbqBQapU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6ffb919c-fea6-47d4-91ac-71ee1cea4109%40chromium.org.

[Mike West]

LGTM1. It looks like y'all have done good work getting Apple, Mozilla, and TAG folks on board, and ensuring that the mechanism is compatible with the prefixed API WebKit shipped. Looking forward to watching some videos while I work in the near future... :)

-mike

You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAEZxfGN2a_uX9U8rzLBuWrT1VrGMeF5TEDwtnwfF0CkdJ0sREA%40mail.gmail.com.

[Jochen Eisinger]

lgtm2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKXHy%3Deoxk3mdXORLQ8QjJga1vfqhsMaaH8OwAWyeKahXgUSiw%40mail.gmail.com.

[Philip Jägenstedt]

LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CALjhuid%2Bamibz_XWG3MURES-_F-mLSMrfUNme6B%3Den-m%2BH8opQ%40mail.gmail.com.

[François Beaufort]

As raised in https://github.com/WICG/picture-in-picture/issues/79, we should provide a way to access Picture-in-Picture window when user-agent initiates Picture-in-Picture. We’ve decided to add a pictureInPictureWindow attribute to the enterpictureinpicture event . 
This feature will be fully tested by web-platform-tests.

Note that Picture-in-Picture Web API has not shipped yet.

Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=887856 Spec: https://github.com/WICG/picture-in-picture/pull/84 

[Fr]

As raised by Mozilla folks at https://github.com/w3c/picture-in-picture/issues/188, we should provide a way to access the Picture-in-Picture window when user-agent leaves Picture-in-Picture. To address this issue, we’ve added a new pictureInPictureWindow attribute to the leavepictureinpicture event as it was added previously to the enterpictureinpicture event.

Web platform tests will be updated and available at https://wpt.fyi/results/picture-in-picture.

Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1096350

Spec: https://github.com/w3c/picture-in-picture/pull/189

Chromium CL: https://chromium-review.googlesource.com/c/chromium/src/+/2241537