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

1,205 阅读5分钟

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

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

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

二、加密媒体: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。

三、已安装的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平台功能”标志的需要。

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

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

现在桌面上可以使用媒体会话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应用程序清单范围内的页面。