Chrome 58 版媒體更新

François Beaufort
François Beaufort

自訂媒體控制項

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

Intent to Ship | Chromestatus Tracker | 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 錯誤

在隱藏狀態下暫停自動播放靜音的影片

如您所知,Chrome Android 版允許 muted 影片在無需使用者互動的情況下開始播放。如果影片標示為 muted 並具備 autoplay 屬性,Chrome 會在使用者可見影片時開始播放影片。

自 Chrome 58 版起,為降低耗電量,系統會在關閉畫面時暫停播放含有 autoplay 屬性的影片,並在您返回畫面中按照 Safari iOS 行為模式繼續播放影片。」

Intent to Ship | Chromestatus Tracker | Chromium 錯誤

color-gamut 媒體查詢

由於廣色域螢幕越來越受歡迎,網站現在可以透過 color-gamut 媒體查詢,存取 Chrome 和輸出裝置所支援的概略顏色範圍。

如果您不熟悉色彩空間、色彩設定檔、廣度、廣度和色彩深度的定義,強烈建議您參閱 改善網路色彩 (WebKit) 網誌文章。我們再深入探討如何使用 color-gamut 媒體查詢,在使用者坐在寬域螢幕上時提供寬幅圖片,反之則改回使用 sRGB 圖片。

Chrome 目前實作接受 srgbp3 (DCI P3 色域指定的域名) 和 rec2020 (ITU-R Recommendations BT.2020 Color Space 指定的域)。詳情請參閱官方範例

在 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 | Chromestatus Tracker | Chromium 錯誤