Chrome 58 版媒體更新

François Beaufort
François Beaufort
GitHub

自訂媒體控制選項

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

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

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>

/foo 在範圍內時，系統會自動播放音訊。

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

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

Intent to Ship | Chromestatus Tracker | Chromium Bug

在不可見時暫停自動播放靜音影片

如你所知，Android 版 Chrome 允許 muted 影片在無使用者互動情況下開始播放。如果影片標示為 muted 且具有 autoplay 屬性，Chrome 就會在使用者能看見影片時開始播放影片。

從 Chrome 58 開始，為了減少電力消耗，當畫面關閉時，具有 autoplay 屬性的影片播放作業會暫停，並在畫面回到螢幕上時恢復，這與 Safari iOS 的行為相同。

Intent to Ship | Chrome 狀態追蹤器 | Chromium 錯誤

色域媒體查詢

隨著廣色域螢幕的使用率越來越高，網站現在可以使用 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")';
}

Intent to Ship | Chrome 狀態追蹤器 | Chromium 錯誤