メディアの更新（Chrome 58）

François Beaufort
François Beaufort
GitHub

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

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

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 バグ

ホーム画面に追加されたプログレッシブ ウェブアプリの自動再生

以前は、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 ブログ投稿のウェブでの色の改善を読むことを強くおすすめします。このブログ投稿では、ユーザーが広色域ディスプレイを使用している場合は広色域画像を提供し、それ以外の場合は sRGB 画像にフォールバックするために color-gamut メディアクエリを使用する方法について詳しく説明しています。

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 バグ