Picture-in-Picture – Float Video and Multitask

In this tutorial, we will see how to create an popup video out into a small floating window with Picture-in-Picture Web API.
For example, if you want to keep watching your running video and want to navigate to other pages and read some other content.

History

Picture-in-Picture was first created on the web in the Safari Browser in 2016. It made it possible for a user to pop out a video into a floating window above all the pages.
Now it is supported via native API’s but that was only supported on an android chrome browser, not for desktops.

That made it to creating a Picture-in-Picture Web API which make it applicable for websites too.

How to use the Picture-In-Picture Web API

let’s start with adding a video element in markup.

<video controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>

You can see the video with controls and options to select view.

To test on firefox browser. all you need to enable the media.videocontrols.picture-in-picture.enabled from about:config link (only for firefox).

It works, but in many cases, you want the video controls to be the same across browsers and you might want control over which videos can be entered into picture-in-picture mode and which ones don’t.

Replace picture-in-picture default mode

we can replace the default mode in the browser with our new method using the Web API.
For example, let’s add a button that, when clicked, enables it:

<button id="pipBtn" class="hidden" disabled>Enter Picture-in-Picture mode</button>

Then select the elements of both the video and the button in JavaScript:

const video = document.getElementById('video');
const pipButton = document.getElementById('pipBtn');

As you can see we have set a button to hidden and disable by default because we need to know first that Picture-in-Picture API is supported and enabled.

We can check that the API is supported and enable the button as shown below:

...
if ('pictureInPictureEnabled' in document) {
    pipButton.classList.remove('hidden')
    pipButton.disabled = false;
}

Enter Picture-in-Picture Mode

Lets make a condition which determmine that the browser has picture-in-picture support is enabled.
then will call requestPictureInPicture() method on the video element when the button with id #pipBtn is clicked.

...
if ('pictureInPictureEnabled' in document) {
    pipButton.classList.remove('hidden')
    pipButton.disabled = false;

    pipButton.addEventListener('click', () => {
        video.requestPictureInPicture();
    });
}

we cannot leave the requestPictureInPicture() method as it is returns a promise and it’s possible for the promise to reject if, for example, the video metadata is not yet loaded or if the disablePictureInPicture attribute is present on the video.

so lets add a catch block:

...
if ('pictureInPictureEnabled' in document) {
    pipButton.classList.remove('hidden')
    pipButton.disabled = false;
    pipButton.addEventListener('click', () => {
        video
        .requestPictureInPicture()
        .catch(error => {
            // Error handling
        });
    });
}

Exit picture-in-picture mode

we can provide a close button for the small window, which enables the window to be close when clicked. However,
we can also provide another way to exit picture-in-picture mode as well.
For example, we can make clicking our #pipBtn close any active small window.

... 
pipButton.addEventListener('click', () => {
    if (document.pictureInPictureElement) {
        document
        .exitPictureInPicture()
        .catch(error => {
        // Error handling
        })
    } else {
        // Request Picture-in-Picture
    }
});
...

Disable picture-in-picture on a video

If we do not want a video to pop out in a small window, you can add the disablePictureInPicture attribute to it, like this:

<video disablePictureInPicture controls src="movie_1.mp4>"></video>

Demo