Want to watch TV while scrolling through Weibo? Want to watch the game while chatting on wechat? For as long as browsers have supported extensions, people have wanted:

Is there a plug-in that can pop up a video window for Chrome?

Various domestic browsers are competing to build in the function of “video popup”, such as firefox China:

Firefox mirror

After all these years, browsers are finally getting this functionality built into them, and there are apis for developers to use.

WICG, the Web Incubator Community Group, is made up of Chrome engineers who started standardizing this feature, which allows videos to pop over, about a year ago. It was called picture-in-Picture, or PiP for short.

Chrome started implementing it earlier this year, and as of this writing, it’s pretty much there. This article will focus on two areas: how Chrome currently implements PiP interactions, and what apis are available for us developers to use.

PiP interaction in Chrome

I used the picture-in-Picture Sample demo to record a simple demo video:

As you can see from the video, Chrome provides a menu item to enable picture-in-picture mode in the native video control. Once picture-in-picture mode is enabled, the video displayed inline remains in its original position and various controls remain. But the most important video image has been seamlessly transferred to the new pop-up window, leaving only a poster image and a gray mask.

We call the pop-up video window the PiP window, which has only the video screen and no title bar or address bar (Chrome-less), unlike the popover opened with window.open(). PiP window also has no complete video control, only three start/pause/close buttons, time, progress bar, volume and other controls. PiP Windows also support drag to resize (no larger than one quadrant) and drag to any location (not shown in the video, as it was not supported at the time of this writing). And most importantly, the PiP window is always on top of all Windows. As I demonstrated in the video, when the focus switches to Safari, the PiP window that opens in Chrome is still on top.

Another interaction not reflected in the recording is that “there can only be one PiP window at a time”. If you enable Picture in Picture mode for multiple videos on the same page, the previous one will automatically exit picture in picture mode, as will videos in multiple tabs in the same browser window, and multiple browser Windows in the same browser. (At the time of writing, Chrome has not implemented the last case, Multiple PiP Windows can be opened in multiple browser Windows at the same time.

PiP related API

1. videoMethod of adding the elementrequestPictureInPicture()

The request puts the video element into picture-in-picture mode and returns a Promise. If there are no exceptions, the promise package value will be a PictureInPictureWindow object, which represents the PiP window that popped up. The API will be covered separately later.

Async function openPiP (video) {try {const pipWindow = await video. RequestPictureInPicture () / / into picture in picture mode... } catch (e) {console.error(e) // handle exceptions}})Copy the code

Under what circumstances will I fail to enter picture-in-picture mode? There are 5 cases:

  1. The operating system does not support this function, or the user has disabled this function through the browser optiondocument.pictureInPictureEnabledProperty returnsfalse
  2. Video file error, or no video stream, only audio stream
  3. This request is not triggered by user action, such as the user does not click any button, the page automatically executes this method, will be blocked as malicious behavior
  4. The current pageThe picture-in-picture feature is disabled with feature-policyAt this time,document.pictureInPictureEnabledProperty is also returnedfalse
  5. The current video element passesdisablePictureInPictureProperty (both HTML and DOM properties) disables the picture-in-picture feature

2. videoElementdisablePictureInPicture

Use this property to disable the picture-in-Picture feature of the video element. The picture-in-Picture option in the right-click menu is disabled.

Through HTML attributes:

<video src="..." disablePictureInPicture>

Via the DOM attribute:

video.disablePictureInPicture = true

3. videoThe event added to the elemententerpictureinpicture 和 leavepictureinpicture 

Video. addEventListener(' Enterpictureinpicture ', function(pipWindow) {// Enter picture-in-picture mode, }) video.adDeventListener ('leavepictureinpicture', function() {// exit picture-in-picture})Copy the code

4. documentMethod added onexitPictureInPicture()

Because only one PiP window can open on a page, the way to get the video element out of picture-in-picture mode is not on the video element itself, but on the Document.

This method also returns a promise, but the promise package value is undefined.

5. documentProperty added topictureInPictureElementandpictureInPictureEnabled

Similar to the document. PointerLockElement and document. FullscreenElement, document. PictureInPictureElement will return the current page in the video element of picture in picture mode, If not, return NULL

Document. PictureInPictureEnabled has been mentioned above, in the current page does not support or be disabled picture in picture mode returns false, otherwise it returns true.

Both properties are read-only.

6. PictureInPictureWindowThe object of the API

The pipWindow object, which has two properties width and height and supports a resize event, can be retrieved from the requestPictureInPicture() method return value and the callback parameter of the EnterPictureinPicture event. Triggered when the user changes the PiP window size.

async function openPiP(video) { const pipWindow = await video.requestPictureInPicture() console.log(pipWindow.width, PipWindow. Height) / / the default window size print pipWindow. AddEventListener (' resize ', function () {the console. The log (pipWindow width, Pipwindow.height) // Triggered when user changes PiP window size})}Copy the code

Note that width and height are read only, and you cannot change the window size by assigning them values.

miscellaneous

1. Existing picture-in-picture APIS in Safari

Safari has supported pict-in-picture Mode for two years and has a companion API with a prefix called Presentation Mode. The good news is that Safari is also working on the new specification, and the fact that Edge is the only one of the big four browser vendors that hasn’t endorsed it so far.

2. The origin of the name “picture in picture”

“Picture in picture” was a function on TV more than ten years ago. When I saw this specification last year, I thought its name was misleading. Now there is also someone in the specification issue asking, I hope you didn’t understand it as nested .

3. Which Version of Chrome is supported

Chrome Canary (69) doesn’t have this feature turned on by default, so you need to turn it on manually

chrome://flags/#enable-experimental-web-platform-features

chrome://flags/#disable-background-video-track

chrome://flags/#enable-picture-in-picture

These three switches, students who do not use Canary wait for two months.

4. Is it possible to ejectvideoExtrinsic element

Regulators say it may in the future