Chrome 58 中的媒体更新

François Beaufort
François Beaufort
GitHub

媒体控件自定义

开发者现在可以使用新的 ControlsList API 自定义 Chrome 的原生媒体控件，例如下载、全屏和 remoteplayback 按钮。

Chrome 58 中的原生媒体控件
Chrome 58 中的原生媒体控件

此 API 提供了一种方法来显示或隐藏不合理或不属于预期用户体验的本地媒体控件，或者仅允许有限的一组功能。

目前的实现方式是，在原生控件上使用 blocklist 机制，并能够使用新的属性 controlsList 直接从 HTML 内容设置这些控件。查看官方示例。

在 HTML 中的用法：

<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>

在 JavaScript 中的用法：

var video = document.querySelector('video');
video.controls; // true
video.controlsList; // ["nofullscreen", "nodownload", "noremoteplayback"]
video.controlsList.remove('noremoteplayback');
video.controlsList; // ["nofullscreen", "nodownload"]
video.getAttribute('controlsList'); // "nofullscreen nodownload"

video.controlsList.supports('foo'); // false
video.controlsList.supports('noremoteplayback'); // true

发布意向 | Chromestatus 跟踪器 | Chromium bug

为添加到主屏幕的渐进式 Web 应用添加了自动播放功能

以前，Chrome 会在 Android 上屏蔽所有带声音的 autoplay，没有任何例外情况。现在，情况不再如此。从现在起，使用改进后的“添加到主屏幕”流程安装的网站可以自动播放来自 Web 应用清单范围内的来源提供的音频和视频，而不会受到限制。

{
  "name": "My Web App",
  "description": "An awesome app",
  "scope": "/foo",
  ...
}
正确做法
<html>
  <link rel="canonical" href="https://example.com/foo">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

当 /foo 在范围内时，音频将自动播放。

错误做法
<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

由于 /bar 不在范围内，音频无法自动播放。

发布意向 | Chromestatus 跟踪器 | Chromium bug

在静音视频自动播放时，如果视频不可见，则暂停播放

您可能已经知道，Android 版 Chrome 允许muted视频在没有用户互动的情况下开始播放。如果视频标记为 muted 且具有 autoplay 属性，则当视频对用户可见时，Chrome 会开始播放该视频。

自 Chrome 58 起，为了降低能耗，当视频带有 autoplay 属性时，在屏幕外播放时会暂停，在屏幕内播放时会恢复，这与 Safari iOS 的行为一致。

发布意向 | Chromestatus 跟踪器 | Chromium bug

color-gamut 媒体查询

随着广色域屏幕越来越受欢迎，网站现在可以使用 color-gamut 媒体查询来访问 Chrome 和输出设备支持的大致颜色范围。

如果您还不熟悉颜色空间、颜色配置文件、色域、广色域和色深的定义，强烈建议您阅读 Improving Color on the Web 这篇 WebKit 博客文章。该文章详细介绍了如何使用 color-gamut 媒体查询在用户使用广色域显示屏时提供广色域图片，否则回退到 sRGB 图片。

Chrome 中的当前实现接受 srgb、p3（由 DCI P3 色彩空间指定的色域）和 rec2020（由 ITU-R 建议 BT.2020 色彩空间指定的色域）关键字。查看官方示例。

在 HTML 中的用法：

<picture>
  <source media="(color-gamut: p3)" srcset="photo-p3.jpg">
  <source media="(color-gamut: rec2020)" srcset="photo-rec2020.jpg">
  <img src="photo-srgb.jpg">
</picture>

在 CSS 中的用法：

main {
  background-image: url("photo-srgb.jpg");
}

@media (color-gamut: p3) {
  main {
    background-image: url("photo-p3.jpg");
  }
}

@media (color-gamut: rec2020) {
  main {
    background-image: url("photo-rec2020.jpg");
  }
}

在 JavaScript 中的用法：

// It is expected that the majority of color displays will return true.
if (window.matchMedia("(color-gamut: srgb)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-srgb.jpg")';
}

if (window.matchMedia("(color-gamut: p3)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-p3.jpg")';
}

if (window.matchMedia("(color-gamut: rec2020)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-rec2020.jpg")';
}

发布意向 | Chromestatus 跟踪器 | Chromium bug