【译】Chrome 73版本关于Audio/Video的更新-白红宇

原文地址：

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

现在支持通过媒体按键来控制桌面上的媒体播放。

Web开发人员可以查询是否可以实施某个HDCP策略。

桌面PWA应用自动画中画，画中画中的“跳过广告”正在试验阶段。

桌面PWA允许自动播放声音

一、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设置一些媒体会话元数据（如标题，艺术家，专辑名称和插图）可用，但尚未连接到桌面通知。它将在以后的支持平台上出现。

查看目前已有并尝试

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

由于，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。

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

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

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


    复制代码

以下是工作原理：

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

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

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

查看更多和尝试

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

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

视频广告模型通常包括前贴片广告。内容提供商通常会在几秒钟后跳过广告。遗憾的是，由于画中画窗口不是交互式的，因此观看画中画视频的用户今天无法做到这一点。

现在桌面上可以使用媒体会话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.}复制代码

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

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

现在所有桌面平台都可以使用Progressive Web Apps（PWA），我们正在将移动设备上的规则扩展到桌面：现在允许已安装的PWA使用声音自动播放。请注意，它仅适用于Web应用程序范围内的页面。