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

François Beaufort
François Beaufort
GitHub

Media Capabilities - Decoding Info API

現在、ウェブ デベロッパーは isTypeSupported() または canPlayType() を使用して、一部のメディアをデコードできるかどうかを大まかに把握しています。ただし、実際の質問は「このデバイスでどの程度動作するか？」であるはずです。

これは、提案されている Media Capabilities が解決しようとしていることの 1 つです。つまり、コーデック、プロファイル、解像度、ビットレートなどの情報に基づいて、デバイスのデコード能力についてブラウザに問い合わせる 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 Fall Creator Update の Chrome で VP9 Profile 2 10 ビットの再生がサポートされるようになったため、Windows 10 が HDR モードの場合、Chrome は HDR 動画の再生もサポートします。技術的なメモとして、Chrome 64 では scRGB カラー プロファイルがサポートされるようになり、メディアを HDR で再生できるようになりました。

YouTube で The World in HDR in 4K (ULTRA HD) を視聴して、YouTube プレーヤーの画質設定で HDR が再生されていることを確認してください。

HDR 対応の YouTube プレーヤーの画質設定
HDR を特徴とする YouTube プレーヤーの画質設定

現時点では、Windows 10 Fall Creator Update、HDR 対応のグラフィック カードとディスプレイ（NVIDIA 10 シリーズのカード、LG HDR テレビまたはモニターなど）、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" のままになります。公式サンプルをお試しください。

出荷の意向 | 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 バグ