- デベロッパーは、ダウンロード、全画面表示、リモート再生ボタンなどのメディア コントロールをカスタマイズできるようになりました。
- [ホーム画面に追加] フローを使用してインストールされたサイトは、マニフェストのスコープ内の音声と動画を自動再生できます。
- Android 版 Chrome で、ミュートされた動画が画面から外れると自動再生が一時停止されるようになりました。
- デベロッパーは、
color-gamut
メディアクエリを使用して、Chrome と出力デバイスでサポートされている色の範囲を把握できるようになりました。 - Media Source Extensions を使用する場合、暗号化されたストリームとクリア ストリームを切り替えることができるようになりました。
メディア コントロールのカスタマイズ
デベロッパーは、新しい ControlsList API を使用して、ダウンロード、全画面表示、remoteplaybackボタンなどの Chrome のネイティブ メディア コントロールをカスタマイズできるようになりました。

この 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>
/foo
がスコープ内にあるため、音声が自動再生されます。
<html> <link rel="canonical" href="https://example.com/bar"> <audio autoplay src="https://cdn.com/file.mp4"></audio> </html>
/bar
がスコープにないため、音声が自動再生されません。
リリース予定 | Chromestatus トラッカー | Chromium バグ
自動再生されるミュート動画を非表示にすると一時停止する
ご存じのとおり、Android 版 Chrome では、ユーザー操作なしで muted
動画の再生を開始できます。動画が muted
としてマークされ、autoplay
属性が設定されている場合、動画がユーザーに表示されると、Chrome は動画の再生を開始します。
Chrome 58 以降、消費電力を削減するため、autoplay
属性を持つ動画の再生は、画面外になると一時停止され、画面内に戻ると再開されます。これは、Safari iOS の動作に準拠しています。'
リリース予定 | Chromestatus トラッカー | 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="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")';
}