Archives

Categories

Meta

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