Chrome 75 中的媒体更新

François Beaufort
François Beaufort

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:supportedsmoothpowerEfficient。不过,如果设置了 keySystemConfiguration 键且 supportedtrue,还会返回另一个名为 keySystemAccessMediaKeySystemAccess 对象。它可用于请求一些媒体密钥并设置加密媒体播放。示例如下:

// 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()

ALT_TEXT_HERE
受保护内容提示

实验意图 | Chromestatus Tracker | Chromium 错误

HTMLVideoElement.playsInline

Chrome 现在支持 playsInline 布尔值属性。如果存在,则它会提示浏览器:视频应默认以“内嵌”方式显示在文档中,并被限制在元素的播放区域。

类似 Safari(iPhone 上的视频元素在开始播放时不会自动进入全屏模式),此提示允许某些嵌入器享受自动全屏播放视频的体验。如果需要,Web 开发者可以用它来选择停用此体验。

<video playsinline></video>

由于 Android 和桌面设备上的 Chrome 不实现自动全屏,因此不会使用 playsInline 视频元素属性提示。

发货意向 | Chromestatus Tracker | Chromium 错误