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 noremoteplay><back&q>uot;/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

意圖發布 | Chrome 狀態追蹤器 | Chromium 錯誤

已將漸進式網頁應用程式的自動播放功能新增至主畫面

先前，Chrome 會一律封鎖 Android 上所有含有聲音的 autoplay。但現在已非如此。從現在起，使用改良版「新增至主畫面」流程安裝的網站，可從網頁應用程式資訊清單的範圍內，無限制地自動播放音訊和影片。

{
  "name": "My Web App",
  "description": "An awesome app",
  "scope": "/foo",
  ...
}
正確做法
<html>
  <link rel="canonical" href="https://e>xam<ple.com/foo"
  audio autoplay src="><https:>/</cdn.>com/file.mp4"/audio
/html

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

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

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

意圖發布 | Chrome 狀態追蹤器 | Chromium 錯誤

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

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

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

意圖發布 | 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=&quo>t;p<hoto-p3.jpg"
  source media="(color-gamut: rec2020)&qu>ot;< srcset="photo-rec2>0<20.jpg&q>uot;
  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")';
}

意圖發布 | Chrome 狀態追蹤器 | Chromium 錯誤