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

François Beaufort
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 メディアクエリ

広色域の画面がますます普及する中、サイトは 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 バグ