Chrome 63/64 中的媒体更新

François Beaufort
François Beaufort
GitHub

媒体功能 - Decoding Info API

如今，Web 开发者依靠 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 的当前实现基于之前记录的播放信息。当丢帧百分比小于 10% 时，它会将 smooth 定义为 true，而当硬件解码的帧超过 50% 时，powerEfficient 为 true。小帧始终被视为节能。

对于不支持此 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;
  });
}

可用于源试用

为了从实际使用 Decoding Info API（媒体功能的一部分）的开发者那里收集尽可能多的反馈，我们之前已在 Chrome 64 中以源试用的形式添加了此功能。

试用期已于 2018 年 4 月成功结束。

有实验意向 | 打算推出 | Chromestatus Tracker | Chromium 错误

Windows 10 上的 HDR 视频播放

高动态范围 (HDR) 视频具有更高的对比度，呈现精确、细节丰富的阴影，并拥有比以往更加清晰的惊艳高光部分。此外，支持广色域意味着颜色更鲜艳。

模拟 SDR 与 HDR 比较（要想看到真正的 HDR，需要有 HDR 显示屏）
模拟 SDR 与 HDR 比较（要想看到真正的 HDR，需要 HDR 显示屏）

由于 Chrome（Windows 10 秋季创作者更新版）现在支持 VP9 Profile 2 10 位播放，因此当 Windows 10 处于 HDR 模式时，Chrome 还支持 HDR 视频播放。从技术层面来说，Chrome 64 现在支持 scRGB 颜色配置文件，这反过来又允许媒体以 HDR 格式播放。

您可以在 YouTube 上观看 4K（超高清）的 HDR 世界，然后查看 YouTube 播放器质量设置，看看它是否可以播放 HDR 视频。

采用 HDR 技术的 YouTube 播放器画质设置
采用 HDR 的 YouTube 播放器画质设置

您目前只需要 Windows 10 秋季创作者更新，这是一种兼容 HDR 的显卡和显示屏（例如 NVIDIA 10 系列卡、LG HDR 电视或显示器），并在 Windows 显示设置中开启 HDR 模式。

Web 开发者可以通过最近的色域媒体查询检测输出设备支持的近似色域，以及通过 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"'))
}

在上例中，传递到 isTypeSupported() 的 VP9 编解码器字符串（配置文件 2）需要根据您的视频编码属性进行更新。

请注意，目前还无法定义CSS、画布、图片和受保护内容中的 HDR 颜色。Chrome 团队正在处理该问题。敬请期待！

Windows 和 Mac 的永久许可

加密媒体扩展 (EME) 中的永久许可是指该许可可保留在设备上，因此应用无需向服务器发送其他许可请求即可将该许可加载到内存中。这就是 EME 支持离线播放的方式。

截至目前，ChromeOS 和 Android 是唯一支持永久许可的平台。实则不再是这样。现在，在 Windows 和 Mac 的 Chrome 64 中，您也可以在设备离线时通过 EME 播放受保护的内容。

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 错误

不受支持的 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
}

顺便提一下，当 playbackRate 为负数、小于 0.0625 或大于 16 时，Chrome 的当前实现会引发此异常。请尝试使用官方示例，了解实际应用情况。

发货意向 | Chromestatus Tracker | Chromium 错误

后台视频轨道优化

Chrome 团队一直在尝试寻找延长电池续航时间的新方法，Chrome 63 也不例外。

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

Chromium 错误

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

在 Chrome 64 之前，当 playbackRate 低于 0.5 或高于 4 时，声音会被静音，因为音质显著下降。由于 Chrome 已改用波形相似性 - 重叠-添加 (WSOLA) 方法来降低质量，因此不再需要将声音静音。也就是说，您现在可以超慢和超快地播放声音

Chromium 错误