Make Your Video Player Float Using PiP API

#javascript #webdev #beginners #tutorial

In this article, I am going to make your video player float by using Picture-in-Picture (PiP) JavaScript Web API. This could be an important feature you can add to your website. If your website is showing a demo or has many videos.

Most of you might have heard of this Picture-in-Picture Extension. It allows you to watch videos in a floating window (always on top of other windows). It works mostly on every site.

But we will create our custom Button that makes this feature available for our website by default. So our users won't need this extension. Let's dive into it.

What is Picture-in-Picture API?

The Picture-in-Picture API allows websites to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites or applications on their devices. Simple, Right?

Let's look at the demo

The following gif shows the demo of how that works:

Let's build it

First, we need a structure means HTML so for that I have simply used two things video and button.

<div class="video-container">
   <video id="videoElement" controls loop src="https://imgur.com/yIVEIR9.mp4"></video>
   <button id="toggleButton">Enable Floating Video</button>
</div>

CSS for this can be found at the end of the article in the Codepen. Now the main thing is JavaScript. Let's add that.

First getting the video and button:

const video = document.getElementById("videoElement");
const toggleBtn = document.getElementById("toggleButton");

After that, we need to verify if your browser supports that or not. You can do like the following:

// 👇Checking that if it is working or not
if ("pictureInPictureEnabled" in document) {
    /// .... other code
}

Now we need to add an event listener on the toggleBtn and when it is clicked then we will run a function called togglePiPMode

 // 👇Checking that if it is working or not
if ("pictureInPictureEnabled" in document) {
  // 👇 Running 'togglePiPMode' function when user click the button
  toggleBtn.addEventListener("click", togglePiPMode);
}

Now it's time to create togglePiPMode function. First, I check if the user is already in PiP mode or not. If he is not the only then request for Picture-in-Picture mode. otherwise simply just exit from PiP. I have wrapped the code in try...catch block to make sure if something goes wrong then it will console the error.

function togglePiPMode() {
  try {
    // 👇 Checking that if user should not be in PiP mode
    if (video !== document.pictureInPictureElement) {
      video.requestPictureInPicture();
    } else {
      document.exitPictureInPicture(); // 👈 If already in PIP Mode then exit
    }
  } catch (error) {
    console.log(error); // Console any error if any
  }
}

Now Picture-in-Picture mode will work flawlessly.

Let's understand events in PiP

The Picture-in-Picture API defines three events, which can be used to detect when picture-in-picture mode is toggled and when the floating video window is resized.*

enterpictureinpicture: Sent to a HTMLVideoElement when it enters picture-in-picture mode.
leavepictureinpicture : Sent to a HTMLVideoElement when it leaves picture-in-picture mode.
resize : Sent to a PictureInPictureWindow when it changes size.

Let's use enterpictureinpicture & leavepictureinpicture in our little project. I'll be changing the Button Text as these events are fired. Let's take a look at the code:

 // 👇 event trigger when you enter in PiP mode
  video.addEventListener("enterpictureinpicture", () => {
    toggleBtn.textContent = "Exit PiP Mode";
  });

  // 👇 event trigger when you leave the PiP mode
  video.addEventListener("leavepictureinpicture", () => {
    toggleBtn.textContent = "Enter PiP Mode";
  });

Now, Let's take a look at the resize event. When we run requestPictureInPicture then it returns a promise and we add resize event on pictureInPictureWindow when it fires then we call a function windowDimensions.

// 👇 This will print the dimensions of the window
function windowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(`Floating window Dimensions : ${pipWindow.width}x${pipWindow.height}px`);
}

// 👇 resize event on pip window
video.requestPictureInPicture().then((pictureInPictureWindow) => {
  pictureInPictureWindow.onresize = windowDimensions;
});

From PictureInPictureWindow interface we can get the width and height and resize event of the floating video window.

Full JavaScript Code

const video = document.getElementById("videoElement");
const toggleBtn = document.getElementById("toggleButton");

// 👇Checking that if it is working or not
if ("pictureInPictureEnabled" in document) {
  // 👇 Running 'togglePiPMode' function when user click the button
  toggleBtn.addEventListener("click", togglePiPMode);

  // 👇 event trigger when you enter in PiP mode
  video.addEventListener("enterpictureinpicture", () => {
    toggleBtn.textContent = "Exit PiP Mode";
  });

  // 👇 event trigger when you leave the PiP mode
  video.addEventListener("leavepictureinpicture", () => {
    toggleBtn.textContent = "Enter PiP Mode";
  });
}

function togglePiPMode() {
  try {
    // 👇 Checking that if user should not be in PiP mode
    if (video !== document.pictureInPictureElement) {
      video.requestPictureInPicture();
    } else {
      document.exitPictureInPicture(); // 👈 If already in PIP Mode then exit
    }
  } catch (error) {
    console.log(error); // Console any error if any
  }
}

Codepen

Conclusion

In this article, I have explained how you can make a floating video player by using Picture-in-Picture (PiP) JavaScript Web API. Now, you can try to add this functionality to your website.

If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

You might be interested in-

Connect with me