メディアの更新（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 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")';
}

出荷の意向 | Chromestatus トラッカー | Chromium のバグ