在本文中,我将讨论 Chrome 73 中的新媒体功能,这些功能包括:
- 现在支持硬件媒体键来控制媒体播放 。
- Web 开发者可以查询是否可以强制执行特定的 HDCP 政策。
- 桌面 PWA 中的自动画中画功能和“跳过广告”“画中画”功能已开启源试用。
- 桌面 PWA 获得有声自动播放。
硬件媒体按键支持
如今,许多键盘都带有用于控制基本媒体播放功能的按键, 播放/暂停、上一首和下一首曲目。耳机也支持此功能。到目前为止, 桌面设备用户无法使用这些媒体键控制音频和视频播放 。今天有变化!
<ph type="x-smartling-placeholder">![键盘媒体键](https://developer.chrome.com/static/blog/media-updates-in-chrome-73/image/keyboard-media-keys-b9e8bca41e6ac.jpeg?authuser=19&hl=zh-cn)
如果用户按下暂停键,Chrome 中正在播放的活动媒体元素将会 并且会收到“已暂停”的媒体事件。如果按下播放键, 之前暂停的媒体元素将被恢复,并收到“播放”媒体 事件。无论 Chrome 在前台还是后台运行,它都能正常运行。
在 ChromeOS 中,使用音频焦点的 Android 应用现在会指示 Chrome 暂停并暂停 继续播放音频,以便在 Chrome 浏览器、 Chrome 应用和 Android 应用。目前只有 ChromeOS 支持此功能 搭载 Android P 的设备。
简而言之,最好始终监听这些媒体事件并采取行动 。
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 现已在桌面设备上推出
(过去只有移动设备支持该功能),网络开发者可以处理
相关的事件,如由媒体键触发的曲目更改。通过
目前支持 previoustrack
和 nexttrack
事件。
navigator.mediaSession.setActionHandler('previoustrack', function() {
// User hit "Previous Track" key.
});
navigator.mediaSession.setActionHandler('nexttrack', function() {
// User hit "Next Track" key.
});
播放键和暂停键由 Chrome 自动处理。但是,如果默认 但您仍然可以为 “播放”和“pause”来防止这种情况发生
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 bug
加密媒体:HDCP 政策检查
借助 HDCP Policy Check API,网络开发者现在可以查询 具体政策,例如HDCP 要求,可以在请求之前强制执行 Widevine 许可和加载媒体。
const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });
if (status == 'usable')
console.log('HDCP 2.2 can be enforced.');
API 适用于所有平台。不过,实际的政策检查
在某些平台上不可用。例如,HDCP 政策检查 promise
会在 Android 和 Android WebView 上拒绝 NotSupportedError
,
请参阅旧版开发者文档并试用官方 示例,以查看支持的所有高带宽数字内容保护 (HDCP) 版本。
打算发货 | Chromestatus Tracker | Chromium bug
已安装 PWA 的自动画中画功能源试用
某些网页可能希望自动进入和退出画中画模式,以进行 视频元素;例如,视频会议 Web 应用将受益于 当用户在二者之间来回切换时自动“画中画”行为 Web 应用和其他应用或标签页。很遗憾, 用户手势要求。自动画中画功能现已推出!
为了支持这些标签页和应用切换,我们新增了 autopictureinpicture
属性
添加到 <video>
元素中。
<video autopictureinpicture></video>
其运作方式大致如下:
- 当文档变为隐藏状态时,
autopictureinpicture
的视频元素 属性会自动进入画中画模式,前提是 允许。 - 当文档变得可见时,画中画中的视频元素 自动离开。
这样就大功告成了!请注意,自动画中画功能仅适用于 用户在桌面设备上安装的渐进式 Web 应用。
愿意进行实验 | Chromestatus Tracker | Chromium bug
“画中画”窗口中跳过广告源试用
视频广告模式通常由前贴片广告组成。内容 提供商通常会提供在播放几秒钟后跳过广告的功能。很抱歉, 因为画中画窗口不是互动式的 目前,画中画功能无法执行此操作。
Media Session API 现已在桌面设备上推出(曾在
移动设备),则可以使用新的 skipad
媒体会话操作来提供此
画中画中的选项。
![“画中画”窗口中的“跳过广告”按钮](https://developer.chrome.com/static/blog/media-updates-in-chrome-73/image/skip-ad-button-picture-095637cf16a4b.png?authuser=19&hl=zh-cn)
如需提供此功能,请在调用时传递一个包含 skipad
的函数
setActionHandler()
。如需将其隐藏,请传递 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 bug
已授予桌面 PWA 的自动播放权限
现在,渐进式 Web 应用适用于所有桌面平台, 我们准备将适用于移动设备的自动播放规则扩展到桌面设备 声音。请注意,这仅适用于 Web 应用清单的范围。