Chrome 73 中的媒体更新

François Beaufort
François Beaufort

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

硬件媒体密钥支持

如今,许多键盘都带有用于控制基本媒体播放功能(例如播放/暂停、上一首曲目和下一首曲目)的按键。头戴设备也有这类功能。此前,桌面设备用户无法使用这些媒体键在 Chrome 中控制音频和视频播放。今天,这一变化!

键盘媒体键
键盘媒体键

如果用户按暂停键,Chrome 中正在播放的有效媒体元素将会暂停,并收到“已暂停”媒体事件。如果按下播放键,先前暂停的媒体元素将恢复播放,并收到“播放”媒体事件。无论 Chrome 是在前台还是后台运行。

在 ChromeOS 中,使用音频焦点的 Android 应用现在会指示 Chrome 暂停和恢复音频,以便在 Chrome 网站、Chrome 应用和 Android 应用之间打造顺畅的媒体体验。目前,只有搭载 Android P 的 ChromeOS 设备支持此功能。

简而言之,最好始终监听这些媒体事件并相应地执行操作。

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 现已在桌面设备上提供(之前只有移动设备支持该 API),Web 开发者可以处理媒体相关事件,例如由媒体键触发的曲目更改。目前支持 previoustracknexttrack 事件。

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.
});

硬件媒体键支持适用于 ChromeOS、macOS 和 Windows。稍后支持 Linux。

查看我们现有的开发者文档并尝试官方媒体会话示例

Chromestatus Tracker | Chromium 错误

加密媒体:HDCP 政策检查

得益于 HDCP Policy Check 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 适用于所有平台。但是,某些平台可能不支持实际的政策检查。例如,在 Android 和 Android WebView 上,HDCP 政策检查 promise 会拒绝并返回 NotSupportedError

请参阅我们的过往开发者文档,并尝试使用官方示例,了解受支持的所有 HDCP 版本。

发货意向 | Chromestatus Tracker | Chromium 错误

针对已安装的 PWA 的自动画中画功能初始试用

某些页面可能希望自动进入和退出视频元素画中画;例如,当用户在 Web 应用与其他应用或标签页之间来回切换时,视频会议 Web 应用将受益于一些自动画中画行为。很遗憾,根据用户手势要求无法实现这一点。我们推出了自动画中画功能!

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

<video autopictureinpicture></video>

下面大致介绍了其运作方式:

  • 当文档隐藏时,最近设置 autopictureinpicture 属性的视频元素(如果允许)会自动进入画中画模式。
  • 当文档变得可见时,画中画中的视频元素会自动离开该文档。

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

如需了解详情,请查看spec,并尝试使用官方 PWA 示例

实验意图 | Chromestatus Tracker | Chromium 错误

画中画窗口中跳过广告的初始试用

视频广告模式通常由前贴片广告组成。content provider 通常提供在几秒钟后跳过广告的功能。遗憾的是,由于画中画窗口不具有互动性,因此观看画中画视频的用户目前无法执行此操作。

Media Session API 现已在桌面设备上提供(之前仅在移动设备上支持),新的 skipad 媒体会话操作可用于在画中画中提供此选项。

画中画窗口中的“跳过广告”按钮
画中画窗口中的“跳过广告”按钮

如需提供此功能,请在调用 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.
}

欢迎试用官方“跳过广告”示例,并告诉我们此功能的改进方式。

实验意图 | Chromestatus Tracker | Chromium 错误

已针对桌面设备 PWA 授予自动播放功能

现在,渐进式 Web 应用适用于所有桌面平台,因此我们将针对移动设备的规则扩展到桌面设备:已安装的 PWA 现在允许有声音的自动播放功能。请注意,此设置仅适用于 Web 应用清单范围内的页面。

Chromium 错误