- 开发者现在可以自定义媒体控件,例如下载、全屏和远程播放按钮。
- 使用“添加到主屏幕”流程安装的网站可以自动播放清单范围内的音频和视频。
- 现在,Android 版 Chrome 会在静音后自动播放静音的视频。
- 开发者现在可以使用
color-gamut
媒体查询获取 Chrome 和输出设备支持的颜色的大致范围。 - 使用媒体来源扩展时,现在可以在加密流和清除流之间切换。
媒体控件自定义
开发者现在可以使用新的 ControlsList API 自定义 Chrome 的原生媒体控件,例如下载、全屏和远程播放按钮。
利用此 API,您可以显示或隐藏没有意义或不符合预期用户体验的原生媒体控件,或仅允许使用一组有限的功能。
目前,我们针对原生控件采用的屏蔽名单机制能够让您直接在 HTML 内容中使用新属性 controlsList
设置这些控件。欢迎查看官方示例。
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>
由于 /foo
在范围内,音频将自动播放。
<html> <link rel="canonical" href="https://example.com/bar"> <audio autoplay src="https://cdn.com/file.mp4"></audio> </html>
音频无法自动播放,因为 /bar
不在范围内。
发货意向 | Chromestatus Tracker | Chromium 错误
视频不可见时暂停自动播放静音的视频
您可能已经知道,Android 版 Chrome 允许 muted
视频无需用户互动即可开始播放。如果视频被标记为 muted
且具有 autoplay
属性,Chrome 会在视频对用户可见后开始播放。
从 Chrome 58 开始,为了减少耗电量,具有 autoplay
属性的视频在离开屏幕时将暂停播放,并在返回视图时恢复播放(遵循 Safari iOS 行为)。
发货意向 | Chromestatus Tracker | Chromium 错误
color-gamut 媒体查询
随着广色域屏幕的日益普及,网站现在可以使用 color-gamut
媒体查询访问 Chrome 支持的大致颜色范围和输出设备。
如果您还不熟悉颜色空间、颜色配置文件、色域、广色域和色深的定义,强烈建议您阅读改进 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")';
}