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 现已在桌面设备上推出(之前仅支持移动设备),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 跟踪器 | Chromium bug

加密媒体: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 跟踪器 | Chromium bug

针对已安装的 PWA 的自动画中画功能的源代码试用

某些网页可能希望为视频元素自动进入和退出画中画模式;例如,当用户在视频会议 Web 应用与其他应用或标签页之间来回切换时,如果能实现一些自动画中画行为,对该应用会很有帮助。很遗憾,由于用户手势要求,我们无法这样做。因此,我们推出了自动画中画功能!

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

<video autopictureinpicture></video>

大致运作方式如下:

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

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

如需了解详情,请参阅规范,并尝试使用官方 PWA 示例

Intent to Experiment | Chromestatus Tracker | Chromium Bug

画中画窗口中跳过广告的来源试用

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

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

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

Intent to Experiment | Chromestatus Tracker | Chromium Bug

为桌面版 PWA 授予自动播放权限

现在,渐进式 Web 应用已在所有桌面平台上推出,我们将在桌面设备上延续在移动设备上实施的规则:现在,已安装的 PWA 可以有声音自动播放。请注意,此属性仅适用于 Web 应用清单的范围内的网页。

Chromium bug