メディアの更新（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 noremoteplay><back&q>uot;/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://e>xam<ple.com/foo"
  audio autoplay src="><https:>/</cdn.>com/file.mp4"/audio
/html

/foo がスコープ内にあるため、音声が自動再生されます。

すべきでないこと
<html>
  <link rel="canonical" href="https://e>xam<ple.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=&quo>t;p<hoto-p3.jpg"
  source media="(color-gamut: rec2020)&qu>ot;< srcset="photo-rec2>0<20.jpg&q>uot;
  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 バグ