在更多网站上自动进入视频画中画模式

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

发布时间：2026 年 3 月 18 日

从 Chrome 142 开始，如果播放音频或视频的 Web 应用注册了媒体会话操作处理程序，则可以自动进入画中画模式。对于音乐和视频播放器而言，这是一项出色的新增功能，但需要开发者明确实现支持。

为了提供顺畅的媒体多任务处理体验并提高画中画 (PiP) 的可发现性，Chrome 引入了由浏览器启动的自动画中画。此功能可让 Chrome 自动为未注册媒体会话操作处理程序的网站打开视频画中画窗口。这样可确保您在切换标签页时媒体内容保持可见。

操作说明

  • 在桌面设备上使用 Chrome 142 或更高版本。
  • 在 chrome://flags/#browser-initiated-automatic-picture-in-picture 中启用“浏览器发起的自动画中画”，然后重启 Chrome。
  • 前往视频网站并播放视频（示例）。
  • 切换到另一个 Chrome 标签页，以触发视频画中画窗口。

运作方式

当您播放媒体内容并切换到其他标签页时，Chrome 可以自动将媒体内容移至始终显示在顶部的视频画中画窗口中。与现有的“媒体播放自动画中画功能”不同，该功能支持视频或任意 HTML 内容（使用 Document Picture-in-Picture API），而浏览器发起的请求始终会打开标准的视频画中画窗口。

为确保提供优质且不具侵扰性的用户体验，Chrome 仅在满足一组严格的条件时才会触发此行为：

  • 根据安全浏览服务，顶级框架网址是安全的。
  • 媒体位于顶部框架中。
  • 媒体在过去两秒内有声音。
  • 媒体具有音频焦点并正在播放。
  • 存在一个“正常”播放器，即已播放且未使用 MediaStream 的未静音媒体元素。
  • 媒体元素必须包含视频轨道。
  • 网站未主动使用摄像头或麦克风。
  • 用户的媒体互动指数已超过阈值，表明用户经常使用该网站。如果用户未明确允许或拒绝使用该功能，则适用此条件。
  • 目前没有打开任何 PiP 窗口。如果另一个画中画窗口已打开，Chrome 不会触发自动转换。
比较浏览器发起的自动画中画（没有 enterpictureinpicture 操作处理程序的网站）和媒体播放的自动画中画（网站已注册处理程序）。

用户控制权和隐私权

浏览器发起的自动画中画请求与网站发起的请求一样，会遵循相同的用户权限和设置。当网站首次自动进入画中画模式时，Chrome 会向用户显示一个权限对话框，询问用户是否允许该网站日后也这样做。

用户还可以随时通过“网站设置”管理这些权限。

开发者控制和选择停用

虽然此功能旨在开箱即用，适用于大多数视频网站，但您可以选择停用此行为。

实现您自己的处理程序

如果您的 Web 应用已为 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).
  }
});

媒体会话的最佳实践

借助浏览器启动的自动画中画功能，媒体会话配置可帮助 Chrome 理解您的内容并与之互动。配置得当的 MediaSession 可确保 PiP 窗口为用户提供优质体验，并提供准确的控件和信息。

使进度条保持同步

如果使用 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 操作处理程序和元数据在整个过渡过程中保持有效和准确。如果在过渡到“下一个”元素期间移除了操作处理程序或取消了操作处理程序的设置，画中画窗口可能会失去处理程序提供的功能。

启用完全控制

除了基本的播放和暂停之外，还可以考虑为 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 分享您的反馈或问题。

资源