【译】Chrome 73版本关于Audio/Video的更新

原文地址：developers.google.com/web/updates…

在本文中，我将讨论Chrome 73新媒体功能，其中包括

• 如今支持经过媒体按键来控制桌面上的媒体播放。
• Web开发人员能够查询是否能够实施某个HDCP策略。
• 桌面PWA应用自动画中画，画中画中的“跳过广告”正在试验阶段。
• 桌面PWA容许自动播放声音

1、Media键盘按键支持

许多键盘现在已有按键能够控制基础Media背景播放功能，例如播放/暂停，上一首/下一首。耳机也有它们。到目前为止，桌面用户没法使用这些媒体键来控制Chrome中的音频和视频播放。而如今一切都变了！

若是用户按下了暂停键，Chrome中播放的活动Media元素将暂停并接收“已暂停”的媒体事件。若是按下播放键，前一个被暂停的media元素将被再次恢复并接收一个‘play’媒体事件。不管Chrome应用是在前台仍是在后台，它都有效。

在Chrome操做系统中，使用音频焦点的Android应用如今会通知Chrome暂停和恢复音频，以便在Chrome，Chrome应用和Android应用上的网站之间建立无缝的媒体体验。

简而言之，老是监听这些媒体事件并采起相应行动是一种很好的作法。

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.
});
复制代码

不光上面，如今桌面上可使用媒体会话API（之前只在移动设备上支持），Web开发人员能够处理媒体相关事件，例如由媒体键触发的曲目更改。目前支持事件previoustrack和nexttrack

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

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

Chrome会自动处理播放和暂停键。可是，若是默认行为不适合您，您能够为“播放”和“暂停”设置一些操做处理程序以防止这种状况发生。

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

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

目前仅在Chrome OS，macOS和Windows上支持，Linux将在稍后推出。

使用媒体会话API设置一些媒体会话元数据（如标题，艺术家，专辑名称和插图）可用，但还没有链接到桌面通知。它将在之后的支持平台上出现。

查看目前已有开发者文档并尝试官方Media Session示例

2、加密媒体：HDCP政策检查

因为HDCP策略检查API，Web开发人员如今能够查询特定策略，例如，在请求Widevine许可和加载媒体以前，能够强制执行HDCP要求。

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

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

API可在全部平台上使用。可是，实际的策略检查可能在某些平台上不可用。例如，HDCP策略检查承诺将拒绝Android和Android WebView上的NotSupportedError。

3、已安装的PWA的自动画中画原点试验

有些页面可能但愿自动进入和离开画中画的视频元素;例如，当用户在Web应用程序与其余应用tab之间来回切换时，视频Web应用程序将受益于一些自动画中画行为。但很遗憾，用户手势目前是作不到的，因此这就是Auto Picture-in-Picture！

为了支持这些tab和app互相切换，video元素添加了一个新的autopictureinpicture属性。

<video autopictureinpicture></video>
复制代码

如下是工做原理：

当document隐藏时，最近设置了autopictureinpicture属性的video元素就会自动进入Picture-in-Picture(若是容许画中画的话)

当document可见时，画中画中的视频元素会自动离开。

请注意，“自动画中画”功能仅适用于用户在桌面上安装的Progressive Web Apps（PWA）。

查看更多细节和尝试官方PWA示例

为了从Web开发人员那里得到反馈，自动画中画功能可做为适用于桌面（Chrome OS，Linux，Mac和Windows）的Chrome 73中的Origin Trial。您须要请求令牌，以便在有限的时间段内为您的源自动启用该功能。这将消除启用“Web平台功能”标志的须要。

4、在画中画窗口中跳过广告的原始试验

视频广告模型一般包括前贴片广告。内容提供商一般会在几秒钟后跳过广告。遗憾的是，因为画中画窗口不是交互式的，所以观看画中画视频的用户今天没法作到这一点。

如今桌面上可使用媒体会话API（以前仅在移动设备上支持），可使用新的跳过媒体会话操做在画中画中提供此选项。

画中画窗口跳过广告按钮

要提供此功能，请在调用setActionHandler（）时使用skipad传递函数。隐藏它传递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.
}
复制代码

媒体会话操做处理程序将保持不变。我建议在媒体播放开始和结束时始终重置它们以免显示意外的“跳过广告”按钮。

5、为PWA授予自动播放权限

如今全部桌面平台均可以使用Progressive Web Apps（PWA），咱们正在将移动设备上的规则扩展到桌面：如今容许已安装的PWA使用声音自动播放。请注意，它仅适用于Web应用程序清单范围内的页面。