Feature Request: Use Document Picture-in-Picture Web API

[beaufortfrancois]

Users should be able to use the Video.js Player in a Picture-in-Picture window, not just the HTML video inside the web player.

Before the Document Picture-in-Picture API, it was only possible to put an HTML <video> element into a Picture-in-Picture window. This new API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content. It is available as an origin trial starting in Chrome 111 on desktop.

async function togglePictureInPicture() {
  // Close Picture-in-Picture window if any.
  if (documentPictureInPicture.window) {
    documentPictureInPicture.window.close();
    return;
  }

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow({
    initialAspectRatio: 640 / 360,
    copyStyleSheets: true,
  });

  // Move video to the Picture-in-Picture window and make it full page.
  const video = document.querySelector("#video");
  pipWindow.document.body.append(video);
  video.classList.toggle("fullpage", true);

  // Listen for the PiP closing event to move the video back.
  pipWindow.addEventListener("unload", (event) => {
    const videoContainer = document.querySelector("#videoContainer");
    const pipVideo = event.target.querySelector("#video");
    pipVideo.classList.toggle("fullpage", false);
    videoContainer.append(pipVideo);
  });
}

// Replace the built-in PiP button with our own button in the Video.js player.
window.onload = () => {
  const controls = videojs("video", { controls: true }).getChild("ControlBar");
  controls.removeChild("FullscreenToggle");
  controls.removeChild("PictureInPictureToggle");
  controls.addChild("button", {
    controlText: "Toggle Picture-in-Picture",
    className: "vjs-visible-text",
    clickHandler: togglePictureInPicture,
  });
};

Documentation:

• https://developer.chrome.com/blog/the-future-of-picture-in-picture/
• https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
• https://github.com/WICG/document-picture-in-picture/issues

[mister-ben]

Nice! My immediate thought is how best to manage the container element - whether we have Video.js insert another div around itself so existing embeds would work, or leave that to the site implementor to put in place.

[beaufortfrancois]

I've had a chance to play with it for https://document-picture-in-picture-api.glitch.me/
Check out https://glitch.com/edit/#!/document-picture-in-picture-api?path=script.js%3A1%3A0

[mister-ben]

I've seen the example, and it works great. Most current implementations won't have a parent node like your `#videoContainer that would maintain the player's aspect ratio when in PIP mode to avoid layout shift. Inserting a new element with the same classes as the player will work in many cases, but it should be an opt-in as there are bound to be edge cases.

[beaufortfrancois]

You're right. In Shaka Player, I'm currently exploring the idea of inserting a non visible cloned placeholder. See https://github.com/shaka-project/shaka-player/pull/4969/files#diff-975b8add50f4c4585c3e592176f485922f0cd128e7aa0c47d1c750448328fcd6R171

[beaufortfrancois]

Out of curiosity, when will this be available to developers? I guess this will be in a specific release.

[mister-ben]

There should be a release today

[beaufortfrancois]

@mister-ben Are you going to add an origin trial token in https://videojs.com/ so that users can get a sense of the Document Picture-in-Picture API when supported in their browser?