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() 提供的输入，但有一个主要区别：如果序列的 intent 是让 requestMediaKeySystemAccess() 选择它支持的子集，则向 requestMediaKeySystemAccess() 提供的输入序列会扁平化为单个值。
解码信息用于描述对单个音频和视频串流的支持质量（流畅度和功耗效率），而不会为调用方做出决策。调用方应仍对媒体配置进行排序，就像使用 requestMediaKeySystemAccess() 时一样。直到现在，他们亲自了解了名单。
navigator.mediaCapabilities.decodingInfo() 会返回一个 Promise，该 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() 更多的提示。
Intent to Experiment | Chromestatus Tracker | Chromium Bug
HTMLVideoElement.playsInline
Chrome 现在支持 playsInline 布尔值属性。如果存在，则会提示浏览器默认在文档中以“内嵌”方式显示视频，并限制在元素的播放区域内。
与 Safari 类似，iPhone 上的视频元素在开始播放时不会自动进入全屏模式，但借助此提示，部分嵌入者可以获得自动全屏视频播放体验。Web 开发者可以根据需要使用此 API 来停用此体验。
<video playsinline></video>
由于 Android 版和桌面版 Chrome 未实现自动全屏，因此不会使用 playsInline 视频元素属性提示。