画中画的未来

François Beaufort

在 Document Picture-in-Picture API 之前，只能将 HTML <video> 元素放入画中画窗口中。这个新 API 可以打开可填充任意 HTML 内容且始终位于顶部的窗口。从桌面版 Chrome 111 开始，Chrome 以源试用的形式提供该版本。

<ph type="x-smartling-placeholder">

</ph>

使用 Document Picture-in-Picture API 创建的画中画窗口（演示）。

与现有的适用于 <video> 的 Picture-in-Picture API 相比，新的 API 提供的功能远不止于此。例如，您可以提供自定义控件和输入内容（例如字幕、播放列表、时间进度条、顶和踩视频），以改善用户的画中画视频播放器体验。

有了画中画功能的完整文档，视频会议 Web 应用便可将多个视频流合并到单个画中画窗口中，而无需借助画布技巧。用户还可以提供自定义控件，例如发送消息、将其他用户设为静音或举手。

以下代码段展示了如何启用自定义视频播放器的画中画功能。

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);
  });
}

有关详情，请参阅任何元素的画中画，而不仅仅是 <video>。

开发者反馈在此阶段非常重要，因此请在 GitHub 上提交问题，并提供建议和问题。

主打图片由 Jakob Owens 拍摄。