- デベロッパーは、ダウンロード ボタン、全画面表示ボタン、リモート再生ボタンなど、メディア コントロールをカスタマイズできるようになりました。
- 「ホーム画面に追加」フローを使用してインストールしたサイトでは、マニフェストのスコープ内で音声と動画を自動再生できます。
- 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
出荷の意向 | 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
メディアクエリを使用して、Chrome と出力デバイスでサポートされているおおよその色範囲にサイトがアクセスできるようになりました。
色空間、カラー プロファイル、色域、広色域、色深度の定義について詳しくは、WebKit のウェブでの色の改善に関するブログ投稿をご覧ください。ユーザーが広色域ディスプレイを使用している場合は 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")';
}