Chrome 73 中的媒体更新

François Beaufort

在本文中，我将讨论 Chrome 73 中的新媒体功能，这些功能包括：

• 现在支持硬件媒体键来控制媒体播放 。
• Web 开发者可以查询是否可以强制执行特定的 HDCP 政策。
• 桌面 PWA 中的自动画中画功能和“跳过广告”“画中画”功能已开启源试用。
• 桌面 PWA 获得有声自动播放。

硬件媒体按键支持

如今，许多键盘都带有用于控制基本媒体播放功能的按键， 播放/暂停、上一首和下一首曲目。耳机也支持此功能。到目前为止， 桌面设备用户无法使用这些媒体键控制音频和视频播放 。今天有变化！

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 键盘媒体键

如果用户按下暂停键，Chrome 中正在播放的活动媒体元素将会 并且会收到“已暂停”的媒体事件。如果按下播放键， 之前暂停的媒体元素将被恢复，并收到“播放”媒体 事件。无论 Chrome 在前台还是后台运行，它都能正常运行。

在 ChromeOS 中，使用音频焦点的 Android 应用现在会指示 Chrome 暂停并暂停 继续播放音频，以便在 Chrome 浏览器、 Chrome 应用和 Android 应用。目前只有 ChromeOS 支持此功能 搭载 Android P 的设备。

简而言之，最好始终监听这些媒体事件并采取行动 。

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

等一下，还有更多贴纸！Media Session API 现已在桌面设备上推出 （过去只有移动设备支持该功能），网络开发者可以处理 相关的事件，如由媒体键触发的曲目更改。通过 目前支持 previoustrack 和 nexttrack 事件。

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

播放键和暂停键由 Chrome 自动处理。但是，如果默认 但您仍然可以为 “播放”和“pause”来防止这种情况发生

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

ChromeOS、macOS 和 Windows 均支持硬件媒体按键。Linux 稍后会推出。

注意：设置某些媒体会话元数据，例如标题、音乐人、专辑名称 可以通过 Media Session API 访问图片，但图片未连接到桌面设备 通知。稍后将在受支持的平台中提供。

请查阅我们现有的开发者文档并试用官方媒体 会话示例。

Chromestatus Tracker | Chromium bug

加密媒体：HDCP 政策检查

借助 HDCP Policy Check API，网络开发者现在可以查询 具体政策，例如HDCP 要求，可以在请求之前强制执行 Widevine 许可和加载媒体。

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

API 适用于所有平台。不过，实际的政策检查 在某些平台上不可用。例如，HDCP 政策检查 promise 会在 Android 和 Android WebView 上拒绝 NotSupportedError，

请参阅旧版开发者文档并试用官方 示例，以查看支持的所有高带宽数字内容保护 (HDCP) 版本。

打算发货 | Chromestatus Tracker | Chromium bug

已安装 PWA 的自动画中画功能源试用

某些网页可能希望自动进入和退出画中画模式，以进行 视频元素；例如，视频会议 Web 应用将受益于 当用户在二者之间来回切换时自动“画中画”行为 Web 应用和其他应用或标签页。很遗憾， 用户手势要求。自动画中画功能现已推出！

为了支持这些标签页和应用切换，我们新增了 autopictureinpicture 属性 添加到 <video> 元素中。

<video autopictureinpicture></video>

其运作方式大致如下：

• 当文档变为隐藏状态时，autopictureinpicture 的视频元素 属性会自动进入画中画模式，前提是 允许。
• 当文档变得可见时，画中画中的视频元素 自动离开。

这样就大功告成了！请注意，自动画中画功能仅适用于 用户在桌面设备上安装的渐进式 Web 应用。

请查看规范了解详情，并试用官方 PWA 示例。

注意：为了获得 Web 开发者的反馈，自动画中画功能 功能作为 [源试用] 在桌面版 Chrome 73（ChromeOS、 Linux、Mac 和 Windows）。您需要 [请求令牌]，以便 功能在限定的时间内自动针对您的源启用。 这样，您就无需启用“网络平台功能”标志。

愿意进行实验 | Chromestatus Tracker | Chromium bug

“画中画”窗口中跳过广告源试用

视频广告模式通常由前贴片广告组成。内容 提供商通常会提供在播放几秒钟后跳过广告的功能。很抱歉， 因为画中画窗口不是互动式的 目前，画中画功能无法执行此操作。

Media Session API 现已在桌面设备上推出（曾在 移动设备），则可以使用新的 skipad 媒体会话操作来提供此 画中画中的选项。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> “跳过广告”“画中画”窗口中的按钮

如需提供此功能，请在调用时传递一个包含 skipad 的函数 setActionHandler()。如需将其隐藏，请传递 null。如下文所述， 非常简单

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}

注意：媒体会话操作处理程序将会保留。我建议你每次都重置这些设置 当媒体播放开始和结束时，以免意外显示“跳过广告” 按钮。

试用官方“跳过广告”示例，并告诉我们此功能如何 改进。

注意：为了获得 Web 开发者的反馈，画中画功能中的“跳过广告”功能 桌面版 Chrome 73 中的窗口功能以 [源试用] 形式提供 （ChromeOS、Linux、Mac 和 Windows）。您需要 [请求令牌]，因此 系统会在限定的期限内为您的源自动启用该功能 。这样，您就无需启用“网络平台功能” 标志。

有实验目的 | Chromestatus Tracker | Chromium bug

已授予桌面 PWA 的自动播放权限

现在，渐进式 Web 应用适用于所有桌面平台， 我们准备将适用于移动设备的自动播放规则扩展到桌面设备 声音。请注意，这仅适用于 Web 应用清单的范围。

Chromium 错误