Chrome 63/64 中的媒体更新

François Beaufort
François Beaufort
GitHub

媒体功能 - Decoding Info API

如今，网站开发者依靠 isTypeSupported() 或 canPlayType() 明确地 知道某些媒体是否可解码。不过，真正的问题应该是： “它在此设备上的表现如何？”

这正是所提议的媒体功能想要实现的目标之一 解决：一个用于向浏览器查询设备的解码能力的 API 根据编解码器、配置文件、分辨率、比特率等信息进行微调。 会显示播放是否流畅、 根据浏览器记录的先前播放统计信息确定的节能效果。

下面是 Decoding Info API 目前的工作原理。请查看 官方示例。

const mediaConfig = {
  type: 'media-source', // or 'file'
  audio: {
    contentType: 'audio/webm; codecs=opus',
    channels: '2', // audio channels used by the track
    bitrate: 132266, // number of bits used to encode a second of audio
    samplerate: 48000 // number of samples of audio carried per second
  },
  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
  }
};

navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => {
  console.log('This configuration is' +
      (result.supported ? '' : ' NOT') + ' supported,' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');
});

您可以尝试不同的媒体配置，直到找到最佳配置 （smooth 和 powerEfficient），并使用它播放相应的媒体 。顺便说一下，Chrome 的当前实现 录制的播放信息。它将 smooth 定义为 true， 的丢帧率低于 10%，而当丢失帧数超过 10% 时，该值为 powerEfficient 超过 50% 的帧是由硬件解码的小帧始终显示 。

建议您使用与下方类似的代码段来检测 并针对 不支持此 API。

function isMediaConfigSupported(mediaConfig) {

  const promise = new Promise((resolve, reject) => {
    if (!('mediaCapabilities' in navigator)) {
      return reject('MediaCapabilities API not available');
    }
    if (!('decodingInfo' in navigator.mediaCapabilities)) {
      return reject('Decoding Info not available');
    }
    return resolve(navigator.mediaCapabilities.decodingInfo(mediaConfig));
  });

  return promise.catch(_ => {
    let fallbackResult = {
      supported: false,
      smooth: false, // always false
      powerEfficient: false // always false
    };
    if ('video' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.video.contentType);
      if (!fallbackResult.supported) {
        return fallbackResult;
      }
    }
    if ('audio' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.audio.contentType);
    }
    return fallbackResult;
  });
}

可用于源试用

为了从使用解码功能的开发者那里获得尽可能多的反馈 Info API（媒体功能的一部分），我们之前已在该字段中添加 功能作为源试用。

试用已于 2018 年 4 月成功完成。

有实验目的 | 打算发货 | Chrome 状态跟踪器 | Chromium 错误

在 Windows 10 设备上播放 HDR 视频

高动态范围 (HDR) 视频具有更高的对比度，能清晰呈现 细腻的阴影和令人惊叹的高光，清晰度前所未有。还有 支持广色域意味着色彩更鲜艳。

<ph type="x-smartling-placeholder">
</ph> SDR 与 HDR 模拟比较（若要看到真正的 HDR 效果，需要使用 HDR 显示屏） <ph type="x-smartling-placeholder">
</ph> SDR 与 HDR 模拟比较（若要看到真正的 HDR 效果，需要使用 HDR 显示屏）

由于适用于 Windows 10 的 Chrome 现在支持 VP9 Profile 2 10 位播放功能， 创作者更新：Chrome 还支持在 Windows 10 系统上播放 HDR 视频 处于 HDR 模式。从技术层面来讲，Chrome 64 现在支持 scRGB 颜色 反过来又允许媒体以 HDR 格式播放。

您可以试试 YouTube 上的 The World in HDR in 4K (ULTRA HD) 并查看 YouTube 播放器画质设置，看看能否播放 HDR。

<ph type="x-smartling-placeholder">
</ph> 支持 HDR 的 YouTube 播放器画质设置 <ph type="x-smartling-placeholder">
</ph> 支持 HDR 的 YouTube 播放器画质设置

现在，您只需要安装兼容 HDR 的 Windows 10 Fall Creator Update 即可 显卡和显示屏（例如 NVIDIA 10 系列显卡、LG HDR 电视或显示器）； 并在 Windows 显示设置中开启 HDR 模式。

Web 开发者可以检测输出所支持的大致色域 设备（具有最近的 color-gamut 媒体查询以及用于 使用 screen.colorDepth 在屏幕上显示某种颜色。这是一种使用 检测是否支持 VP9 HDR：

// Detect if display is in HDR mode and if browser supports VP9 HDR.
function canPlayVp9Hdr() {

  // TODO: Adjust VP9 codec string based on your video encoding properties.
  return (window.matchMedia('(color-gamut: p3)').matches &&
      screen.colorDepth >= 48 &&
      MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10.01.09.16.09.01"'))
}

Profile 2 的 VP9 编解码器字符串在isTypeSupported() 需要根据视频编码属性更新以上示例。

请注意，目前无法在 CSS、canvas、 图片和受保护内容。Chrome 团队正在处理中。敬请期待！

适用于 Windows 和 Mac 的永久许可

加密媒体扩展 (EME) 中的永久许可表示 必须保存在设备上，以便应用将许可加载到 而无需向服务器发送另一个许可请求。就是这样 EME 支持离线播放。

迄今为止，ChromeOS 和 Android 是唯一支持 许可。事实证明这一点现在不复存在。在以下时间通过 EME 播放受保护内容： 现在，您也可以在 Windows 和 Mac 上的 Chrome 64 中使设备离线。

const config = [{
  sessionTypes: ['persistent-license'],
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'SW_SECURE_DECODE' // Widevine L3
  }]
}];

navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content while being offline when
  // license is stored locally on device and loaded later.
})
.catch(error => {
  // Persistent licenses are not supported on this platform yet.
});

您可查看示例媒体 PWA 来自行试用永久许可 然后按以下步骤操作：

  1. 转到 https://biograf-155113.appspot.com/ttt/episode-2/
  2. 点击“允许离线阅读”然后等待视频下载完成。
  3. 关闭互联网连接。
  4. 点击“播放”按钮并开始观看该视频！

媒体预加载默认为“metadata”

匹配其他浏览器的Chrome 桌面版现在会将 将 <video> 和 <audio> 元素的值预加载到 "metadata"，以便 减少带宽和资源用量从 Chrome 64 开始，此新行为仅适用于 在未设置预加载值的情况下使用。请注意，预加载属性的 MediaSource 作为 网站会处理自己的预加载。

换句话说，<video> 预加载值现在为 "metadata"，而 <video preload="auto"> 预加载值保持 "auto"。试用官方示例。

打算发货 | Chromestatus Tracker | Chromium bug

不支持的 playRate 会引发异常

在发生 HTML 规范更改后，如果媒体元素的playbackRate 设成了 Chrome 不支持的值（例如，负值）、 Chrome 63 中抛出了 "NotSupportedError" DOMException。

const audio = document.querySelector('audio');
try {
  audio.playbackRate = -1;
} catch(error) {
  console.log(error.message); // Failed to set the playbackRate property
}

顺便提一下，Chrome 的当前实现 playbackRate 为负数、小于 0.0625 或大于 16。来试试吧 官方示例 看看它的实际运用情况

打算发货 | Chromestatus Tracker | Chromium bug

后台视频轨道优化

Chrome 团队一直致力于寻找新的方法来延长电池续航时间， Chrome 63 也不例外。

如果视频不包含任何音轨，视频将会自动 在 Chrome 后台（例如，在不可见的标签页中）播放时暂停 桌面设备（Windows、Mac、Linux 和 ChromeOS）。这是来自 仅适用于 Chrome 62 中的 MSE 视频的类似更改。

Chromium 错误

移除针对极端播放速率的静音

在 Chrome 64 之前，当 playbackRate 低于 0.5 或高于 4 时，声音会设为静音 因为质量显著下降由于 Chrome 已改用 使用波形-相似性-重叠添加 (WSOLA) 方法降低质量， 就不用再静音了这意味着你可以超慢地播放声音 速度超快了

Chromium 错误