在更多網站上自動進入影片子母畫面

Benjamin Keen
Benjamin Keen
François Beaufort
François Beaufort
GitHub

發布日期：2026 年 3 月 18 日

從 Chrome 142 開始，如果網頁應用程式註冊了媒體工作階段動作處理常式，就能在播放音訊或影片時自動進入子母畫面模式。這項功能非常適合音樂和影片播放器，但開發人員必須明確實作支援功能。

為提供順暢的媒體多工處理體驗，並提升子母畫面 (PiP) 的可探索性，Chrome 推出瀏覽器啟動的自動子母畫面功能。這項功能可讓 Chrome 自動開啟視訊子母畫面視窗，適用於未註冊媒體工作階段動作處理常式的網站。這樣一來，切換分頁時，媒體內容就不會消失。

操作說明

  • 在電腦上使用 Chrome 142 以上版本。
  • 在 chrome://flags/#browser-initiated-automatic-picture-in-picture 中啟用「Browser initiated automatic picture in picture」，然後重新啟動 Chrome。
  • 前往影片網站並播放影片 (範例)。
  • 切換至其他 Chrome 分頁，觸發影片子母畫面視窗。

運作方式

播放媒體時，如果切換到其他分頁，Chrome 會自動將媒體移至永遠置頂的子母畫面視窗。現有的「媒體播放自動子母畫面」功能支援影片或任意 HTML 內容 (使用 Document Picture-in-Picture API)，但瀏覽器發起的請求一律會開啟標準影片子母畫面視窗。

為確保使用者享有優質且不被打擾的體驗，Chrome 只會在符合嚴格條件時觸發這項行為：

  • 根據安全瀏覽服務，頂端框架網址安全無虞。
  • 媒體位於頂端影格。
  • 媒體在過去兩秒內有聲音。
  • 媒體具有音訊焦點且正在播放。
  • 存在單一「一般」播放器，也就是已播放且未靜音的媒體元素，且未使用 MediaStream。
  • 媒體元素必須有視訊軌。
  • 網站並未主動使用攝影機或麥克風。
  • 使用者媒體參與度指數超過門檻，表示經常使用網站。如果使用者未明確允許或拒絕使用這項功能，則適用這項條件。
  • 目前沒有開啟任何子母畫面視窗。如果已開啟其他子母畫面視窗，Chrome 就不會觸發自動轉換。
比較瀏覽器啟動的自動 PiP (網站沒有 enterpictureinpicture 動作處理常式) 和媒體播放的自動 PiP (網站已註冊處理常式)。

使用者控制權與隱私權

瀏覽器啟動的自動 PiP 會遵守與網站啟動要求相同的使用者權限和設定。網站首次自動進入子母畫面時，Chrome 會向使用者顯示權限對話方塊，詢問是否允許網站日後執行這項操作。

使用者也可以隨時透過「網站設定」管理這些權限。

開發人員控制項和停用功能

這項功能適用於大多數影片網站，但你也可以選擇停用。

實作自己的處理常式

如果您的網頁應用程式已為 enterpictureinpicture 動作註冊媒體工作階段動作處理常式，系統會優先採用您的實作方式，Chrome 不會啟動自己的自動轉換程序。

如要自訂 Chrome 認為適合轉換時的行為，enterpictureinpicture 動作處理常式會在 MediaSessionActionDetails 中包含 reason。您可以檢查 reason 是否為 contentoccluded (表示瀏覽器因分頁隱藏而發出要求)，然後決定如何繼續。

navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
  if (details.reason === "contentoccluded") {
    // The browser suggests entering Picture-in-Picture.
    // You can choose to open a standard video PiP or a Document PiP window, or do
    // nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
  }
});

媒體工作階段最佳做法

透過瀏覽器啟動的自動 PiP，媒體工作階段設定可協助 Chrome 瞭解及與內容互動。妥善設定 MediaSession 可確保子母畫面視窗提供優質體驗，並為使用者提供準確的控制選項和資訊。

讓進度列保持同步

如果使用 setPositionState API，且媒體工作階段位置未正確更新，PiP 視窗會在媒體播放期間顯示不準確的進度列。為避免這種情況，請務必視需要使用 navigator.mediaSession.setPositionState() 更新或取消設定 position state (例如媒體來源變更或重設時)，確保子母畫面視窗反映播放媒體的正確位置。

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

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);

妥善處理轉場效果

如果網站會自動播放「下一集」，請確保 MediaSession 動作處理常式和中繼資料在轉換期間保持有效且準確。如果轉換至「Next」元素期間移除或取消設定動作處理常式，子母畫面視窗可能會失去處理常式提供的功能。

啟用完整控制權

除了基本的播放和暫停功能，也請考慮實作 seekto、previoustrack 和 nexttrack 的處理常式。這樣一來，使用者就能直接從子母畫面視窗瀏覽內容，不必返回原始分頁。

navigator.mediaSession.setActionHandler("seekto", (details) => {
  if (details.fastSeek && "fastSeek" in video) {
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
});

參與討論及分享意見

如果對這項行為有任何意見或遇到問題，請前往 crbug.com 分享。

資源