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

[beaufortfrancois]

Users should be able to use the Shaka 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.
  const video = document.querySelector("#video");
  pipWindow.document.body.append(video);

  // 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");
    videoContainer.append(pipVideo);
  });
}

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

[avelad]

@beaufortfrancois are you interested on send a PR for this?

[beaufortfrancois]

Sure. I've opened #4969 ;)

[avelad]

Thanks @beaufortfrancois !