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 対応の画質設定

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

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

// 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" のままになります。公式サンプルをお試しください。

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

サポートされていない playbackRate で例外が発生する

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 のバグ

極端な playbackRate でのミュート機能を削除

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

Chromium のバグ