Chrome 的媒体功能已在版本 75 中更新。在本文中,我将讨论这些新功能,其中包括:
- 预测加密媒体的播放是否流畅且省电。
- 支持视频元素的
playsInline
属性提示。
加密媒体:解码信息
从 Chrome 66 开始,Web 开发者可以使用解码信息,根据编解码器、配置文件、分辨率、比特率等信息向浏览器查询设备的清晰内容解码能力。它会根据浏览器记录的过往播放统计信息,指示播放是否流畅(及时)且节能。
此后,定义解码信息的 Media Capabilities API 规范也已更新,以处理加密媒体配置,以便使用加密媒体 (EME) 的网站可以选择最佳媒体流。
以下是 EME 的解码信息的工作原理。请尝试使用官方示例。
const encryptedMediaConfig = {
type: 'media-source', // or 'file'
video: {
contentType: 'video/webm; codecs="vp09.00.10.08"',
width: 1920,
height: 1080,
bitrate: 2646242, // number of bits used to encode a second of video
framerate: '25' // number of frames used in one second
},
keySystemConfiguration: {
keySystem: 'com.widevine.alpha',
videoRobustness: 'SW_SECURE_DECODE' // Widevine L3
}
};
navigator.mediaCapabilities.decodingInfo(encryptedMediaConfig).then(result => {
if (!result.supported) {
console.log('Argh! This encrypted media configuration is not supported.');
return;
}
if (!result.keySystemAccess) {
console.log('Argh! Encrypted media support is not available.')
return;
}
console.log('This encrypted media configuration is supported.');
console.log('Playback should be' +
(result.smooth ? '' : ' NOT') + ' smooth and' +
(result.powerEfficient ? '' : ' NOT') + ' power efficient.');
// TODO: Use `result.keySystemAccess.createMediaKeys()` to setup EME playback.
});
EME 播放具有专门的解码和渲染代码路径,这意味着,与清晰播放相比,编解码器支持和性能有所不同。因此,必须在传递给 navigator.mediaCapabilities.decodingInfo()
的媒体配置对象中设置新的 keySystemConfiguration
键。此键的值是一个保存多个众所周知的 EME 类型的字典。这会复制提供给 EME 的 requestMediaKeySystemAccess()
的输入,但有一个主要区别:只要序列的意图是让 requestMediaKeySystemAccess()
选择其支持的子集,提供给 requestMediaKeySystemAccess()
的输入序列都会被展平为单个值。
解码信息描述了对一对音频和视频串流的支持质量(流畅度和节能性),而无需为调用方做出决定。调用方仍应像对 requestMediaKeySystemAccess()
一样对媒体配置进行排序。而现在,他们自己也在浏览清单。
navigator.mediaCapabilities.decodingInfo()
会返回一个使用包含以下三个布尔值的对象异步解析的 promise:supported
、smooth
和 powerEfficient
。不过,如果设置了 keySystemConfiguration
键且 supported
为 true
,还会返回另一个名为 keySystemAccess
的 MediaKeySystemAccess
对象。它可用于请求一些媒体密钥并设置加密媒体播放。示例如下:
// Like rMSKA(), orderedMediaConfigs is ordered from most to least wanted.
const capabilitiesPromises = orderedMediaConfigs.map(mediaConfig =>
navigator.mediaCapabilities.decodingInfo(mediaConfig)
);
// Assume this app wants a supported and smooth media playback.
let bestConfig = null;
for await (const result of capabilitiesPromises) {
if (result.supported && result.smooth) {
bestConfig = result;
break;
}
}
if (bestConfig) {
const mediaKeys = await bestConfig.keySystemAccess.createMediaKeys();
// TODO: rest of EME path as-is
} else {
// Argh! No smooth configs found.
// TODO: Maybe choose the lowest resolution and framerate available.
}
请注意,解码加密媒体的信息需要使用 HTTPS。
此外,请注意,它可能会以与 requestMediaKeySystemAccess()
相同的方式在 Android 和 ChromeOS 上触发用户提示。不过,尽管需要更多调用来设置加密媒体播放,但它显示的提示数不会超过 requestMediaKeySystemAccess()
。
实验意图 | Chromestatus Tracker | Chromium 错误
HTMLVideoElement.playsInline
Chrome 现在支持 playsInline
布尔值属性。如果存在,则它会提示浏览器:视频应默认以“内嵌”方式显示在文档中,并被限制在元素的播放区域。
类似 Safari(iPhone 上的视频元素在开始播放时不会自动进入全屏模式),此提示允许某些嵌入器享受自动全屏播放视频的体验。如果需要,Web 开发者可以用它来选择停用此体验。
<video playsinline></video>
由于 Android 和桌面设备上的 Chrome 不实现自动全屏,因此不会使用 playsInline
视频元素属性提示。