播放媒體時自動進入子母畫面

François Beaufort
François Beaufort
GitHub

發布日期：2025 年 2 月 5 日

在 Chrome 120 以上版本中，當使用者將焦點從目前的分頁切換時，視訊會議網頁應用程式可以自動開啟子母畫面視窗。這項功能適用於想在展示文件或使用其他分頁或視窗時，即時查看與參與者互動的簡報者。詳情請參閱「為視訊會議網頁應用程式啟用自動子母畫面功能」。

自 Chrome 134 起，播放音訊或影片的網路應用程式可自動進入子母畫面模式。也就是說，使用者切換分頁時，網頁上的音樂和影片播放器現在可以無縫切換至迷你播放器視窗，無須手動啟用。

Spotify 使用者切換分頁時，自動開啟及關閉圖片內圖片視窗。

為支援這些媒體播放用途，Chrome 134 版桌面網頁應用程式可自動進入畫中畫模式，但會設有幾項限制，以確保良好的使用者體驗。只有符合下列所有條件的網頁應用程式，才能自動啟用媒體播放的子母畫面：

  • 根據安全瀏覽服務，頂層框架網址是安全的。

  • 媒體位於頂端框架中。

  • 媒體在過去兩秒內有聲音。

  • 媒體有音訊焦點。

  • 媒體正在播放。

  • 已註冊 "enterpictureinpicture" 動作的媒體工作階段動作處理常式。

  • 使用者的媒體參與度指數已超過門檻，表示使用者經常在這個網路應用程式中觀看媒體內容。如果使用者的瀏覽器設定為「可要求進入子母畫面」，就會發生這種情況。如果使用者明確允許網頁應用程式進入子母畫面，則不適用此條件。

Chrome 瀏覽器網站資訊窗格中的自動進入子母畫面設定。
Chrome 瀏覽器網站資訊窗格中的自動子母畫面設定。

錯誤 386193409 會追蹤顯示條件的實作方式，以便更輕鬆地進行偵錯和實作。

請注意，如果已開啟其他子母畫面視窗，Chrome 就不會觸發自動進入子母畫面功能。如果系統自動開啟現有的子母畫面視窗，且即將關閉，則不會套用這項規則。

如果網頁應用程式符合上述條件，將焦點切換至其他分頁時，系統會觸發媒體工作階段動作處理常式回呼函式，以便執行 "enterpictureinpicture" 動作。這可讓網頁應用程式在不需使用者手勢的情況下，開啟畫中畫視窗。接著，系統可能會向使用者顯示權限對話方塊，詢問使用者是否要允許網站每次自動進入子母畫面、僅這次允許，或是一律不允許。

子母畫面視窗中的權限重疊訊息，詢問使用者是否允許網站自動進入子母畫面。
系統會詢問使用者是否允許自動進入子母畫面。

您可以使用 <video> 的 Picture-in-Picture API，從 HTML <video> 元素開啟子母畫面視窗，也可以使用 Document Picture-in-Picture API 開啟一律置頂視窗，並填入任意 HTML 內容。開啟子母畫面視窗時，系統不會將焦點放在該視窗，且在頁面再次顯示時會自動關閉。

以下範例說明如何在使用者按下按鈕時播放 HTML <video> 元素。接著，請使用可開啟子母畫面視窗的回呼函式，為 "enterpictureinpicture" 動作安全地註冊媒體工作階段動作處理常式。這個視窗包含使用 <video> 的子母畫面 API 的影片。

const video = document.querySelector("video");

async function onPlayButtonClick() {
  // Play video.
  await video.play();
}

try {
  // Request video to automatically enter picture-in-picture when eligible.
  navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
    await video.requestPictureInPicture();
  });
} catch (error) {
  console.log("The enterpictureinpicture action is not yet supported.");
}

試試 VideoJS 播放器示範，展示 Document Picture-in-Picture API，或使用 Video Media Session 和 Audio Media Session 範例。

互動並分享意見回饋

如有任何意見或問題，歡迎前往 crbug.com 與我們分享。

資源

特別銘謝

感謝 Benjamin Keen 和 Frank Liberato 提供評論。