子母畫面的未來

François Beaufort

在 Document Picture-in-Picture API 之前，您只能將 HTML <video> 元素放入子母畫面視窗。這個新的 API 可讓您開啟可填入任意 HTML 內容的「一律開啟」視窗。從電腦版的 Chrome 111 開始，您可以進行來源試用。

使用 Document Picture-in-Picture API 建立的子母畫面視窗 (示範)。

相較於現有的 <video> 的子母畫面 API，新版 API 的功能更加強大。舉例來說，您可以提供自訂控制項和輸入內容 (例如字幕、播放清單、時間進度控制器、喜歡和不喜歡的影片)，改善使用者的子母畫面影片播放器體驗。

有了子母畫面的完整文件功能，視訊會議網頁應用程式可將多個視訊串流合併成單一子母畫面視窗，完全不必仰賴畫布入侵。他們也可以提供自訂控制項，例如傳送訊息、將其他使用者設為靜音，或舉手。

下列程式碼片段說明如何切換自訂影片播放器的子母畫面。

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 提供。