Chrome 63/64 のメディアの更新

François Beaufort
François Beaufort
GitHub

Media Capabilities - Decoding Info API

現在、ウェブ デベロッパーは isTypeSupported() または canPlayType() を使用して、一部のメディアをデコードできるかどうかを漠然と把握しています。ただし、本当は「このデバイスでどの程度動作するか」を尋ねるべきです。

これは、提案されている Media Capabilities が解決しようとしている問題の一つです。この API は、コーデック、プロファイル、解像度、ビットレートなどの情報に基づいて、デバイスのデコード能力についてブラウザにクエリを実行します。これにより、ブラウザによって記録された過去の再生統計情報に基づいて、再生がスムーズで電力効率が良いかどうかなどの情報を公開できます。

現時点での Decoding Info API の仕組みを簡単に説明します。公式サンプルをご覧ください。

const mediaConfig = {
  type: 'media-source', // or 'file'
  audio: {
    contentType: 'audio/webm; codecs=opus',
    channels: '2', // audio channels used by the track
    bitrate: 132266, // number of bits used to encode a second of audio
    samplerate: 48000 // number of samples of audio carried per second
  },
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 2646242, // number of bits used to encode a second of video
    framerate: '25' // number of frames used in one second
  }
};

navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => {
  console.log('This configuration is' +
      (result.supported ? '' : ' NOT') + ' supported,' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');
});

最適なメディア構成（smooth と powerEfficient）を見つけるまで、さまざまなメディア構成を試し、適切なメディア ストリームを再生できます。ちなみに、Chrome の現在の実装は、以前に記録された再生情報に基づいています。フレームのドロップ率が 10% 未満の場合は smooth を true として定義し、フレームの 50% 以上がハードウェアによってデコードされた場合は powerEfficient を true として定義します。小さいフレームは常に電力効率が高いとみなされます。

以下のスニペットに似たスニペットを使用して、この API をサポートしていないブラウザで可用性を検出し、現在の実装にフォールバックすることをおすすめします。

function isMediaConfigSupported(mediaConfig) {

  const promise = new Promise((resolve, reject) => {
    if (!('mediaCapabilities' in navigator)) {
      return reject('MediaCapabilities API not available');
    }
    if (!('decodingInfo' in navigator.mediaCapabilities)) {
      return reject('Decoding Info not available');
    }
    return resolve(navigator.mediaCapabilities.decodingInfo(mediaConfig));
  });

  return promise.catch(_ => {
    let fallbackResult = {
      supported: false,
      smooth: false, // always false
      powerEfficient: false // always false
    };
    if ('video' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.video.contentType);
      if (!fallbackResult.supported) {
        return fallbackResult;
      }
    }
    if ('audio' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.audio.contentType);
    }
    return fallbackResult;
  });
}

オリジン トライアルで利用可能

デベロッパーの皆様から Decoding Info API（Media Capabilities の一部）に関するフィードバックをできるだけ多く収集するため、この機能は以前に Chrome 64 でオリジン トライアルとして追加されました。

トライアルは 2018 年 4 月に正常に終了しました。

テストの目的 | リリースの目的 | Chromestatus トラッカー | Chromium バグ

Windows 10 での HDR 動画再生

ハイ ダイナミック レンジ（HDR）動画は高コントラストで、細部まで精細な陰影と美しいハイライトをこれまで以上に鮮明に再現します。さらに、広色域をサポートしているため、色がより鮮やかになります。

シミュレートされた SDR と HDR の比較（真の HDR を表示するには HDR ディスプレイが必要です）
シミュレートされた SDR と HDR の比較（真の HDR を表示するには HDR ディスプレイが必要です）

Windows 10 向け Chrome の Fall Creator Update で VP9 Profile 2 10 ビットの再生がサポートされたため、Chrome では Windows 10 が HDR モードになっている場合に HDR 動画の再生もサポートされるようになりました。技術的な注意事項として、Chrome 64 では scRGB カラー プロファイルがサポートされるようになりました。これにより、メディアを HDR で再生できるようになります。

YouTube で The World in HDR in 4K（ULTRA HD）を視聴して、YouTube プレーヤーの画質設定で HDR が再生されるかどうかを確認できます。

HDR 対応の YouTube プレーヤーの画質設定
YouTube プレーヤーの HDR 対応の画質設定

今必要なのは、HDR 対応のグラフィック カードとディスプレイ（NVIDIA 10 シリーズ カード、LG HDR TV、モニターなど）である Windows 10 Fall Creator Update と、Windows のディスプレイ設定で HDR モードをオンにすることだけです。

ウェブ デベロッパーは、最新の color-gamut メディアクエリを使用して出力デバイスでサポートされている色域の概要を検出し、screen.colorDepth を使用して画面に色を表示するために使用されるビット数を検出できます。それらを使用して VP9 HDR がサポートされているかどうかを検出する方法の一例を次に示します。

// Detect if display is in HDR mode and if browser supports VP9 HDR.
function canPlayVp9Hdr() {

  // TODO: Adjust VP9 codec string based on your video encoding properties.
  return (window.matchMedia('(color-gamut: p3)').matches &&
      screen.colorDepth >= 48 &&
      MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10.01.09.16.09.01"'))
}

上記の例で isTypeSupported() に渡される プロファイル 2 の VP9 コーデック文字列は、動画エンコードのプロパティに基づいて更新する必要があります。

なお、CSS、キャンバス、画像、保護されたコンテンツで HDR の色を定義することはできません。Chrome チームが解決に向けて取り組んでいます。どうぞご期待ください。

Windows と Mac の永続ライセンス

Encrypted Media Extensions（EME）の永続ライセンスは、ライセンスをデバイス上で永続化できることを意味します。これにより、アプリは別のライセンス リクエストをサーバーに送信せずにライセンスをメモリに読み込めます。EME では、このような方法でオフライン再生がサポートされています。

これまで、永続ライセンスをサポートしていたのは ChromeOS と Android のみでした。もはや真実ではありません。Windows と Mac の Chrome 64 でも、デバイスがオフラインのときに EME を介して保護されたコンテンツを再生できるようになりました。

const config = [{
  sessionTypes: ['persistent-license'],
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'SW_SECURE_DECODE' // Widevine L3
  }]
}];

navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content while being offline when
  // license is stored locally on device and loaded later.
})
.catch(error => {
  // Persistent licenses are not supported on this platform yet.
});

永続ライセンスをご自身で試すには、サンプル メディア PWA をチェックアウトし、次の手順に沿って操作します。

  1. https://biograf-155113.appspot.com/ttt/episode-2/ にアクセスします。
  2. [オフラインで使用する] をクリックし、動画がダウンロードされるまで待ちます。
  3. インターネット接続をオフにします。
  4. [再生] ボタンをクリックして動画をお楽しみください。

メディアのプリロードのデフォルトは「metadata」です。

他のブラウザの実装と同様に、Chrome デスクトップでは帯域幅とリソース使用量を削減するために、<video> 要素と <audio> 要素のデフォルトのプリロード値を "metadata" に設定するようになりました。Chrome 64 以降では、この新しい動作はプリロード値が設定されていない場合にのみ適用されます。ウェブサイトが独自のプリロードを処理するため、MediaSource がメディア要素にアタッチされると、preload 属性のヒントは破棄されます。

つまり、<video> プリロード値は "metadata" になり、<video preload="auto"> プリロード値は "auto" のままになります。公式サンプルをお試しください。

リリースの目的 | Chrome のステータス トラッカー | Chromium のバグ

サポートされていない playRate を使用すると、例外が発生します

HTML 仕様の変更により、メディア要素の playbackRate が Chrome でサポートされていない値（負の値など）に設定されている場合、Chrome 63 では "NotSupportedError" DOMException がスローされます。

const audio = document.querySelector('audio');
try {
  audio.playbackRate = -1;
} catch(error) {
  console.log(error.message); // Failed to set the playbackRate property
}

なお、Chrome の現在の実装では、playbackRate が負の数、0.0625 未満、または 16 より大きい場合にこの例外が発生します。公式サンプルを試して、この機能の動作を確認してください。

リリース予定 | Chromestatus トラッカー | Chromium バグ

バックグラウンド動画トラックの最適化

Chrome チームは常にバッテリー駆動時間を改善する新しい方法を模索しており、Chrome 63 も例外ではありません。

動画に音声トラックが含まれていない場合、Chrome パソコン（Windows、Mac、Linux、ChromeOS）のバックグラウンド（非表示のタブなど）での再生時に動画が自動的に一時停止されます。これは、Chrome 62 の MSE 動画にのみ適用されていた同様の変更のフォローアップです。

Chromium のバグ

極端な playRates のミュートを削除

Chrome 64 より前では、品質が大幅に低下したため、playbackRate が 0.5 未満または 4 を超えるときに音声がミュートされていました。Chrome では、品質低下に対する Waveform-Similarity-Overlap-Add（WSOLA）アプローチに切り替えたため、音声をミュートする必要がなくなりました。サウンドを非常にゆっくりと 高速で再生できます

Chromium のバグ