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

[beaufortfrancois]

Users should be able to use the Bitmovin 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

[beaufortfrancois]

@dweinber What do you think of this API?

[dweinber]

Hi @beaufortfrancois, Thanks for reaching out and letting us know about this API, really appreciate it. We already had an eye on the draft, good to see it finally landed in the wild 🙂 However, so far we manage PIP (and fullscreen, for that matter) within our player SDK rather than just the UI, and I anticipate we'd do the same for this API. Therefore, I've logged this internally with our Product team for consideration and I'm closing this ticket.

[beaufortfrancois]

I'm glad it was already under your radar ;) Is there some kind of public tracker where users can follow your work? I'll be happy to help if needed.

[dweinber]

We don't have a public tracker really, but a good option would be a post in our community as others can upvote and comment to it, and our Product team is also tracking the community to gain the interest in certain features