In this quick example, we’ll learn how to use the Picture-in-Picture mode in JavaScript. Next, we’ll see how to an example of using this new web API with Angular 10.

Picture-in-Picture (PiP) is a new feature in modern browsers that enables users to watch videos in a floating window that stays always on top of other windows.

How to Check if your Browser Supports Picture-in-Picture

You can simply use the document.pictureInPictureEnabled boolean to check if Picture-in-Picture is supported and enabled in your web browser.

if ('pictureInPictureEnabled' in document) {

    if(document.pictureInPictureEnabled){
          console.log('Picture-in-Picture Web API is enabled');
    }

}
else{
  console.log('Picture-in-Picture Web API is not supported');
} 

For Picture-in-Picture support we check if pictureInPictureEnabled property exists in the document object then we verify that the web API is enabled if equals true.

#angular