在本文中,我将讨论 Chrome 73 中的新媒体功能,其中包括:
- 现在支持使用硬件媒体键在桌面设备上控制媒体播放。
- Web 开发者可以查询特定 HDCP 政策是否可以强制执行。
- 桌面设备 PWA 中的自动画中画和画中画中的“跳过广告”即将推出源试用。
- 桌面设备 PWA 被授予有声自动播放功能。
硬件媒体密钥支持
如今,许多键盘都带有用于控制基本媒体播放功能(例如播放/暂停、上一首曲目和下一首曲目)的按键。头戴设备也有这类功能。此前,桌面设备用户无法使用这些媒体键在 Chrome 中控制音频和视频播放。今天,这一变化!
![键盘媒体键](https://developer.chrome.google.cn/static/blog/media-updates-in-chrome-73/image/keyboard-media-keys-b9e8bca41e6ac.jpeg?authuser=6&hl=ro)
如果用户按暂停键,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 开发者可以处理媒体相关事件,例如由媒体键触发的曲目更改。目前支持 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.
});
硬件媒体键支持适用于 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
媒体会话操作可用于在画中画中提供此选项。
![画中画窗口中的“跳过广告”按钮](https://developer.chrome.google.cn/static/blog/media-updates-in-chrome-73/image/skip-ad-button-picture-095637cf16a4b.png?authuser=6&hl=ro)
如需提供此功能,请在调用 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 应用清单范围内的页面。