Geekly Articles each Day
📜 ⬆️ ⬇️

Picture in Picture mode in Chrome 69


In version 69, the PictureInPicture extension appeared, which allows you to display video on top of all windows. I decided to test this opportunity and share the results.

Immediately I found an example, but the “picture in picture” button for switching to Picture-in-Picture mode (hereinafter referred to as PiP) was not available, I went to check the chrome flag : // flags / # enable-picture-in-picture , the value is “Default”, for this flag, it is equivalent to “Enabled”, but still tried to turn it on manually.



It did not help, it turned out that another chrome: // flags / # enable-surfaces-for-videos flag is needed, the value “Default” for it is equivalent to “Disabled”.
')


Turned on and earned. They also write that it is necessary to enable the # enable-experimental-web-platform-features flag, but it worked for me without it.



Example


Let's make a simple example, the <video /> tag, the button for enabling / disabling the PiP mode, handling available PiP events.

<html> <head> <title>Chrome 69</title> </head> <body> <video width="320" height="240" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> <br/> <button> PiP</button> <script> const video = document.querySelector('video'); const button = document.querySelector('button'); if (!document.pictureInPictureEnabled) { button.textContent = ' PiP  .'; button.disabled = true; } button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { /**/ }) .catch(() => { /**/ }); } else { video.requestPictureInPicture() .then(() => { /**/ }) .catch(() => { /**/ }); } }); video.addEventListener('enterpictureinpicture', () => { button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { button.textContent = ' PiP'; }); </script> </body> </html>

Check the availability of the mode:

 if (document.pictureInPictureEnabled){ // PiP  }

It's simple, if the property exists, it returns true or false.

Make a request to start the mode:
 button.addEventListener('click', () => { video.requestPictureInPicture() .then(() => { /**/ }) .catch(() => { /**/ }); });

If permission is granted, execute then otherwise catch. The request will definitely be rejected if not initiated by a user event.

After running document.pictureInPictureElement, it will return our <video /> element.

To exit the mode, in the PiP window, click the cross in the upper right corner.

You can make an exit programmatically:

 button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { /**/ }) .catch(() => { /**/ }); } });

After exiting the document.pictureInPictureElement mode, it will again return null.

PiP Events


Two events are available, turning on PiP mode and turning off respectively:

 video.addEventListener('enterpictureinpicture', () => { //  button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { //  button.textContent = ' PiP'; });

Summary


At the moment, this mode works only with the <video /> tag, but it may be expanded.
The PiP window appears in the lower right corner, so far we can not affect it.
PiP mode is incompatible with full screen mode, or one or the other, which is quite logical.
There can be only one PiP window at a time.
The tab on which the user has turned on PiP mode is indicated by an icon (visible on the CDRD).

UPD : The W3C division called the Web Platform Incubator Community Group deals with the new API.
Using this API, sites can control when to open and close a PiP window, make their own button to control and collect statistics when a user uses PiP.

Some browsers already support this feature, but not based on W3C
(For example, Opera and Yandex Browser).
Firefox and Edge have not yet reported on the implementation of the new API.

Source: https://habr.com/ru/post/422955/

More articles:


All Articles