The Picture-in-Picture API is one of the newest features that has been added to some modern browsers, it gives websites the ability to create a floating video window that will be on top of all other windows which lets the user keep watching the video while he interacts with other websites and also other apps on his device.

In this article, we will implement the Picture-in-Picture from scratch using vanilla Javascript, but before we get started, have a look at what we are going to make through this article:

Let's start with the HTML part, we just need a Video tag and a button that will enable and disable the Picture-in-Picture feature:

<video id="video" controls playsinline src="https://player.vimeo.com/external/517074808.sd.mp4?s=2a6149b02f93d4b52519798bbb878dcd82a54b30&profile_id=164&oauth2_token_id=57447761"></video>

<div>
    <button id="button" hidden disabled>Enable Picture-in-Picture</button>
</div>

For the Javascript part, let's first get our Video and Button:

const video = document.getElementById('video');
const button= document.getElementById('button');

Next, since this feature is new and it's not compatible with all browsers (at the date of writing this article), we have to check if the current browser supports it or not, let's add some javascript:

if ('pictureInPictureEnabled' in document) {
  // the code here will run if Picture-in-Picture is supported by the browser
}

Now we can add an on-click event listener to the button that will enable Picture-in-Picture feature, but before that, we have to show and enable the button, because, as you can see in HTML, the button is Hidden and Disabled by default:

if ('pictureInPictureEnabled' in document) {
  button.disabled = false;
  button.hidden = false;

  button.addEventListener('click', function() {
    video.requestPictureInPicture();
  });
}

Now, our PIP feature is working, we just need to click on the button to enable it, let's make the button dynamic, click on it to enable it, and if clicked again it will disable it:

if ('pictureInPictureEnabled' in document) {
  button.disabled = false;
  button.hidden = false;

  button.addEventListener('click', function() {
    if (document.pictureInPictureElement) {
      document.exitPictureInPicture();
    } else {
      video.requestPictureInPicture();
    }
  });
}

We used document.pictureInPictureElement to check if there is an element on the page that uses PIP, if there is, document.exitPictureInPicture() will make the PIP element go back to its original format (a normal video) if there isn't then we simply enable PIP on the video.

Our PIP feature is working just fine, we can enable it and disable it just by clicking on the button, but we have one last thing to do, the text on the button is Enable Picture-in-Picture when we click on it and the PIP is enabled, the text should be Disable Picture-in-Picture right? let's do this:

video.addEventListener('enterpictureinpicture', () => {
  button.textContent = 'Enable Picture-in-Picture';
});

video.addEventListener('leavepictureinpicture', () => {
  button.textContent = 'Disable Picture-in-Picture';
});

enterpictureinpicture and leavepictureinpicture are two useful events defined by the Picture-in-Picture API, they do exactly what their names say.

• enterpictureinpicture will be triggered when PIP is enabled.
• leavepictureinpicture will be triggered when PIP is disabled.

That's it! Go try it yourself.

Picture-in-Picture API is still in its early days so it's not supported by all browsers, make sure to use it very carefully.

Can I use .. 25 August 2022