- 開發人員現在可以自訂媒體控制項，例如下載、全螢幕和遠端播放按鈕。
- 透過「新增至主畫面」流程安裝的網站可以在資訊清單範圍中自動播放音訊和影片。
- Android 版 Chrome 現已暫停在隱藏影片時，自動播放靜音的影片。
- 開發人員現在可以使用
color-gamut媒體查詢，存取 Chrome 和輸出裝置支援的約略顏色範圍。 - 使用媒體來源擴充功能時，現在可以切換使用已加密和清除的串流。
媒體控制選項自訂
開發人員現在可以使用新的 [ControlsList API] 自訂 Chrome 的原生媒體控制項，例如下載、全螢幕和 [遠端播放] 按鈕。
這個 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
Intent to Ship | Chromestatus Tracker | Chromium 錯誤
已將漸進式網頁應用程式新增至主畫面
先前，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>
Intent to Ship | Chromestatus Tracker | Chromium 錯誤
隱藏影片時，暫停自動播放靜音的影片
您可能已經知道，Android 版 Chrome 允許 muted 影片在使用者沒有互動的情況下開始播放。如果影片標示為 muted 且具有 autoplay 屬性，Chrome 會在使用者看到影片時開始播放影片。
為降低耗電量，自 Chrome 58 版起，系統會在關閉螢幕時暫停播放具有 autoplay 屬性的影片，並根據 Safari iOS 行為恢復返回檢視畫面。」
Intent to Ship | Chromestatus Tracker | Chromium 錯誤
色域媒體查詢
隨著廣色域螢幕越來越受歡迎，網站現在可以使用 color-gamut 媒體查詢存取 Chrome 支援的概略顏色範圍，以及輸出裝置。
如果您還不熟悉色空間、色系、廣色、廣度和色彩深度的定義，強烈建議您參閱改善網路上的色彩 WebKit 網誌文章。這將會詳細說明如何使用 color-gamut 媒體查詢，以便在使用者觀看廣色域圖片時提供廣色域圖片，而以其他方式改回使用 sRGB 圖片。
Chrome 目前的實作方式接受 srgb、p3 (DCI P3 色域指定的廣度) 和 rec2020 (ITU-R 建議 BT.2020 Color Space 指定的廣度)。歡迎查看官方範例。
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")';
}