Chrome 58 中的音频/视频更新

弗朗索瓦·博福
François Beaufort

媒体控件自定义

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

Chrome 58 中的原生媒体控件
图 1. Chrome 58 中的原生媒体控件

此 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 Tracker | Chromium 错误

已将渐进式 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>
<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

有发货意向 | Chromestatus Tracker | Chromium 错误

不可见时暂停自动播放静音视频

您可能已经知道,Android 版 Chrome 允许 muted 视频无需用户互动即可开始播放。如果视频标记为 muted 且具有 autoplay 属性,则 Chrome 会在该视频对用户可见时开始播放。

从 Chrome 58 开始,为了减少耗电量,具有 autoplay 属性的视频在屏幕外播放时将暂停播放,并在用户重新出现在用户视野中时继续播放(遵循 Safari iOS 行为)。

有发货意向 | Chromestatus Tracker | Chromium 错误

color-gamut 媒体查询

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

如果您还不熟悉颜色空间、颜色配置文件、色域、广色域和色深的定义,强烈建议您阅读 改进网络上的颜色 WebKit 博文。其中详细介绍了如何使用 color-gamut 媒体查询在用户使用广色域显示屏时提供广色域图片,否则回退到 sRGB 图片。

Chrome 中的当前实现接受 srgbp3(DCI P3 颜色空间指定的色域)和 rec2020(ITTU-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 Tracker | Chromium 错误