Chrome 58 版的音訊/影片更新功能

François Beaufort
François Beaufort
GitHub

自訂媒體控制選項

開發人員現在可以使用新的 [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 追蹤工具 | 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>

出貨意圖 | 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 錯誤