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