- 開發人員現在可以自訂媒體控制項，例如下載、全螢幕和遠端播放按鈕。
- 使用「Add to Homescreen」流程安裝的網站，可自動播放資訊清單範圍內的音訊和視訊。
- 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
Intent to Ship | Chrome 狀態追蹤器 | 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 | Chrome 狀態追蹤器 | Chromium 錯誤
在不可見時暫停自動播放靜音影片
如你所知，Android 版 Chrome 允許 muted 影片在無使用者互動情況下開始播放。如果影片標示為 muted 且具有 autoplay 屬性，Chrome 會在使用者可見影片時開始播放。
從 Chrome 58 開始，為了減少電力消耗，當螢幕關閉時，系統會暫停播放含有 autoplay 屬性的影片，並在螢幕顯示時恢復播放，這與 Safari iOS 的行為相同。」
Intent to Ship | Chrome 狀態追蹤器 | Chromium 錯誤
color-gamut 媒體查詢
隨著廣色域螢幕越來越受歡迎，網站現在可以使用 color-gamut 媒體查詢，存取 Chrome 和輸出裝置支援的色彩範圍。
如果您不熟悉色彩空間、色彩設定檔、色域、廣色域和色彩深度的定義，強烈建議您閱讀 WebKit 部落格文章「Improving Color on the 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")';
}