Picture-in-Picture (PiP) API

One of the newer browser features is the Picture-in-Picture API which allows you to play your video in a small re-sizable, movable overlay video element so that you can continue to watch your video even after you change tabs or minimize the tab containing the video.

Browser Support

Since the API is relatively new,full browser support is limited to latest versions of Chrome, while other browsers offer either partial or no support, For Safari, you can use this ployfill since Safari’s implementation is different. You can find the full list of compatiable browsers here.

You can check if your browser supports PIP Mode by checking if ‘pictureInPictureEnabled‘ exists in document

if ('pictureInPictureEnabled' in document) {
    console.log('PIP is supported);
}else{
    console.log('PIP is not supported);
}

API Methods

This is a very simple API to use and it has two main methods

requestPictureInPicture()

This method is used to request the browser to make the DOM element play in PIP mode. It returns a promise

Example

let video = document.getElementById('video');

video.requestPictureInPicture().then(data=>console.log('video playing in PIP mode'));

When a DOM element is in PIP mode, then document.pictureInPictureElement refers to the element in PIP mode, document.pictureInPictureElement is null when no DOM element is in PIP mode.

exitPictureInPicture()

This method is used to stop any DOM element from being in PIP mode. This also returns a Promise. 

Example:

document.exitPictureInPicture();

Listen for PIP Mode

You can also add listeners on a DOM object to detect when an element enters PIP mode and when it leaves PIP mode.

enterpictureinpicture

This is a listener which is triggered when an element enters into the PIP Mode

Example:

var video = document.getElementById('video');

video.addEventListener('enterpictureinpicture', function(event){
    console.log('video entered PIP Mode');
})

leavepictureinpicture

This is a listener which is triggered when an element exits the PIP Mode

Example:

var video = document.getElementById('video');

video.addEventListener('leavepictureinpicture', function(event){
    console.log('video has left PIP Mode');
})

Demo

You can find the code for the demo here. In this simple demo, we first create a simple HTML page with a video element playing a sample video and an button over it which toggles the video’s PIP mode.

In the main.js page, we first check if the PIP API is supported in the users browser, if its not, we show them an alert and disable the toggle button.

// if PIP is not supported
if (!'pictureInPictureEnabled' in document) {    
    alert('PIP is not supported in your browser');    
    button.disabled = true;
}

Next in the toggle function, we check if the document has an active pictureinpictureElement, if it does then we call the method to exit PIP mode, else we call the method to enable PIP mode

// function to toggle PIP mode for the video element
function toggle(){    
    if(document.pictureInPictureElement){        
        // video is already in pip mode, now exit pip mode                 
        document.exitPictureInPicture();    
    }else{        
        //video is not in pip mode, request pip mode        
        video.requestPictureInPicture();    
    }
}

We also have two event listeners which log to the console whenever the video element enters or leaves the PIP mode.

// code to listen for when the video is in PIP mode
video.addEventListener('enterpictureinpicture', function(event){
    console.log('video entered PIP Mode');
})

// code to listen for when the video exits PIP mode
video.addEventListener('leavepictureinpicture', function(event){    
    console.log('video has left PIP Mode');
})