音声と動画の更新（Chrome 58）

フランソワ ボーフォール
François Beaufort
GitHub

メディア コントロールのカスタマイズ

デベロッパーは、新しい [ControlsList API] を使用して、ダウンロード、全画面表示、[remoteplayback] ボタンなど、Chrome のネイティブ メディア コントロールをカスタマイズできるようになりました。

ネイティブ メディア コントロール（Chrome 58）
図 1. ネイティブ メディア コントロール（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>

<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

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

非表示のときにミュートされた動画の自動再生を一時停止

ご存じのとおり、Android 版 Chrome では、ユーザーの操作なしで muted 動画の再生を開始できます。動画が muted としてマークされ、autoplay 属性が指定されている場合、動画がユーザーに表示されると Chrome は動画の再生を開始します。

Chrome 58 以降では、消費電力を削減するために、autoplay 属性が設定された動画の再生は画面外では一時停止され、iOS の Safari の動作に沿って表示に戻ると再開されます。

出荷の意向 | 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 のバグ