- 開發人員現在可以自訂媒體控制項,例如下載、全螢幕和遠端播放按鈕。
- 透過「新增至主畫面」流程安裝的網站可以在資訊清單範圍內自動播放音訊和影片。
- 現在 Android 版 Chrome 會在隱藏影片時暫停自動播放靜音的影片。
- 開發人員現在可以透過
color-gamut
媒體查詢,存取 Chrome 和輸出裝置所支援的概略色彩範圍。 - 使用 Media Source Extensions 時,您現在可以切換加密和清除串流。
自訂媒體控制項
開發人員現在可以使用新的 ControlsList API 自訂 Chrome 的原生媒體控制項,例如下載、全螢幕和 remoteplayback 按鈕。
這個 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 目前實作接受 srgb
、p3
(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")';
}