隨著 Document Picture-in-Picture API 的最近介紹 (甚至之前)，網頁開發人員越來越熱衷於能在使用者從目前的分頁切換焦點時，自動開啟子母畫面視窗。這項功能在視訊會議網頁應用程式中特別實用，因為簡報者可以在展示文件或其他分頁或視窗時，即時查看參與者並進行互動。
自動進入子母畫面
為了支援這類視訊會議，Chrome 120 電腦版網頁應用程式將自動進入子母畫面，但請留意幾項限制，確保使用者享有良好的體驗。網頁應用程式必須符合下列所有條件，才能使用自動子母畫面功能：
已針對
"enterpictureinpicture"動作註冊媒體工作階段動作處理常式。透過 getUserMedia 主動擷取相機或麥克風。
使用者透過瀏覽器設定預設啟用「自動子母畫面」。
如果網頁應用程式符合資格，當使用者將焦點切換至其他分頁時，系統會觸發 "enterpictureinpicture" 動作的媒體工作階段動作處理常式回呼函式，讓該應用程式在沒有使用者手勢的情況下開啟子母畫面視窗。
網頁開發人員可以使用 <影片> 的子母畫面 API 從 HTML <video> 元素開啟子母畫面視窗，或使用 Document Picture-in-Picture API 開啟一個一律開啟的視窗，並填入任意 HTML 內容。開啟子母畫面視窗時，系統不會聚焦，並在頁面重新顯示頁面顯示設定時自動關閉。
以下範例說明如何要求存取使用者的相機。接著，使用可開啟子母畫面視窗的回呼函式，安全地為 "enterpictureinpicture" 動作註冊媒體工作階段動作處理常式。這個視窗包含使用者的攝影機影片串流，其中使用 <video> 的 Picture-in-Picture API。
const video = document.querySelector("video");
// Request access to the user's camera.
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
video.srcObject = stream;
});
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", () => {
video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
請嘗試使用視訊會議媒體工作階段範例。
進入瀏覽器媒體控制項的子母畫面
當使用者想在 Chrome 瀏覽器 UI 中使用媒體控制項進入子母畫面時，"enterpictureinpicture" 媒體工作階段動作也非常實用。
如果未播放任何 HTML <video> 元素，但只有音訊，當您為 "enterpictureinpicture" 註冊媒體工作階段動作處理常式時，就會讓瀏覽器知道網頁應用程式知道處理方式，並會自行開啟子母畫面視窗。
如果網頁應用程式想使用 Document Picture-in-Picture API 開啟子母畫面視窗，而不是讓瀏覽器透過 <影片> 的子母畫面 API 處理，那麼這個 API 也能派上用場。
以下範例說明如何為 "enterpictureinpicture" 動作安全地註冊媒體工作階段動作處理常式。使用者在 Chrome 瀏覽器 UI 中使用媒體控制項進入子母畫面時，回呼函式會透過 Document Picture-in-Picture API 開啟子母畫面視窗。
try {
// Use the Document Picture-in-Picture API when entering
// picture-in-picture from browser media control.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
const pipWindow = await documentPictureInPicture.requestWindow();
// Populate HTML content and handle closing window...
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
您可以使用 Document Picture-in-Picture API VideoJS 播放器示範或影片媒體工作階段範例。
互動並提供意見
如有任何意見或遇到的問題，請前往 crbug.com 與我們分享。
資源
特別銘謝
感謝 Tommy Steimel、Ryan Flores、Shimi Rahim、Frank Liberato 和 Rachel Andrew 針對他的評論。