子母畫面的未來

François Beaufort
François Beaufort
GitHub

在文件子母畫面 API 之前，您只能將 HTML <video> 元素放入子母畫面視窗。現在，這個新的 API 可以開啟可填入任何 HTML 內容的持續待機視窗。從電腦版 Chrome 111 開始，皆可進行來源試用。

播放 Sintel 預告片的子母畫面視窗。
使用 Document Picture-in-Picture API 建立的子母畫面視窗 (示範)。

新 API 提供的功能遠比現有 <video> 的 Picture-in-Picture 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。