メディアの更新（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 バグ

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

以前は、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 Recommendation 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 バグ