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