- 开发者现在可以自定义媒体控件，例如“下载”“全屏”和“remoteplayback”按钮。
- 使用“添加到主屏幕”流程安装的网站可以自动播放清单范围内的音频和视频。
- Android 版 Chrome 现在会在静音视频不可见时暂停自动播放。
- 开发者现在可以使用
color-gamut媒体查询来访问 Chrome 和输出设备支持的大致颜色范围。 - 使用媒体源扩展程序时，现在可以在加密流和清晰流之间切换。
媒体控件自定义
开发者现在可以使用新的 [ControlsList API] 自定义 Chrome 的原生媒体控件，例如下载、全屏和 [remoteplayback] 按钮。
此 API 提供了一种方法，可显示或隐藏不合逻辑、不属于预期用户体验或仅允许使用一组有限功能的原生媒体控件。
目前的实现是原生控件上的屏蔽名单机制，能够使用新属性 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
已将适用于渐进式网页应用的自动播放功能添加到主屏幕
以前，Chrome 会在 Android 设备上例外地屏蔽所有带声音的 autoplay。现在，情况不再如此。从现在起，使用改进后的“添加到主屏幕”流程安装的网站可以自动播放从网站应用清单范围内来源提供的音频和视频，不受限制。
{
"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>
<html>
<link rel="canonical" href="https://example.com/bar">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
发货意向 | Chromestatus 跟踪器 | Chromium bug
在不可见时暂停自动播放的静音视频
您可能已经知道，Android 版 Chrome 允许 muted 视频在无需用户互动的情况下开始播放。如果视频被标记为 muted 且具有 autoplay 属性，则当视频对用户可见时，Chrome 会开始播放该视频。
从 Chrome 58 开始，为了降低功耗，具有 autoplay 属性的视频在离开屏幕时将暂停播放，并在重新进入视野时恢复播放，遵循 Safari iOS 行为。'
发货意向 | Chromestatus 跟踪器 | Chromium bug
color-gamut 媒体查询
随着广色域屏幕越来越受欢迎，网站现在可以使用 color-gamut 媒体查询来访问 Chrome 和输出设备支持的大致颜色范围。
如果您还不熟悉颜色空间、颜色配置文件、色域、广色域和色深的定义，强烈建议您阅读 WebKit 博文 Improving Color on the Web（改进 Web 上的颜色）。其中详细介绍了如何在用户使用宽色域显示屏时使用 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")';
}