Chrome 58 版媒體更新

François Beaufort
François Beaufort
GitHub

自訂媒體控制選項

開發人員現在可以使用新的 ControlsList API，自訂 Chrome 的原生媒體控制項，例如下載、全螢幕和remoteplayback按鈕。

Chrome 58 的原生媒體控制項
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 追蹤工具 | 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>

當 /foo 位於範圍內時，音訊會自動播放。

錯誤做法
<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

音訊無法自動播放，因為 /bar 不在範圍內。

出貨意圖 | Chromestatus 追蹤工具 | Chromium 錯誤

在影片隱藏時暫停自動播放的靜音影片

如您所知，Android 版 Chrome 允許muted影片在沒有使用者互動的情況下開始播放。如果影片標示為 muted 且具有 autoplay 屬性，Chrome 會在影片對使用者顯示時開始播放。

自 Chrome 58 起，為減少耗電量，當影片不在畫面上時，系統會暫停播放含有 autoplay 屬性的影片，並在影片回到畫面時繼續播放，這與 Safari iOS 的行為一致。

出貨意圖 | Chromestatus 追蹤工具 | Chromium 錯誤

color-gamut 媒體查詢

隨著廣色域螢幕越來越普及，網站現在可以使用 color-gamut 媒體查詢，存取 Chrome 和輸出裝置支援的近似色彩範圍。

如果您還不熟悉色域、色彩設定檔、色域、廣色域和色深等定義，強烈建議您閱讀「改善網頁色彩」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")';
}

出貨意圖 | Chromestatus 追蹤工具 | Chromium 錯誤