このページは Cloud Translation API によって翻訳されました。

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

François Beaufort

ウェブデベロッパーは、再生がスムーズで電力効率がよいかどうかを予測できるようになりました。
Chrome で Windows 10 での HDR 動画再生がサポートされるようになりました。
永続ライセンスを使用したオフライン再生が Windows と Mac でサポートされるようになりました。
<video> 要素と <audio> 要素のデフォルトのプリロード値が "metadata" になりました。
メディアの再生速度がサポートされていない場合にエラーがスローされるようになりました。
Chrome で、バックグラウンドでの動画のみのメディアがすべて一時停止されるようになりました。
極端な PlaybackRate の場合、音声はミュートが解除されました。

メディア機能 - Decoding Info API

現在、ウェブデベロッパーは isTypeSupported() または canPlayType() を使用して、一部のメディアがデコード可能かどうかをあいまいに把握しています。本当の質問は「このデバイスでどの程度のパフォーマンスになるか」です

これは、提案されたメディア機能で解決したいことの一つです。コーデック、プロファイル、解像度、ビットレートなどの情報に基づき、デバイスのデコード機能をブラウザにクエリする 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 と定義します。スモールフレームは常に電力効率が良いとみなされます。

注: メディア構成がサポートされていて、再生統計情報がブラウザでまだ記録されていない場合、navigator.mediaCapabilities.decodingInfo から返される結果は常にスムーズで電力効率の良いものとして報告されます。

下記のようなスニペットを使用して可用性を検出し、この 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;
  });
}

注意: メディア構成タイプが "file" の場合、上記のスニペットでは isTypeSupported() ではなく canPlayType() を使用する必要があります。

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

Decoding Info API（メディア機能の一部）を実際に利用しているデベロッパーから可能な限り多くのフィードバックをいただくため、Google は以前、この機能をオリジントライアルとして Chrome 64 に追加しました。

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

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

Windows 10 での HDR 動画再生

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

シミュレーションによる SDR と HDR の比較（真の HDR を確認するには HDR ディスプレイが必要） — シミュレーションによる SDR と HDR の比較（真の HDR を確認するには、HDR ディスプレイが必要です）

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

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

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

ウェブデベロッパーは、最新の色域メディアクエリと、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.
});

永続ライセンスを自分で試すには、サンプル Media PWA を確認し、次の操作を行います。

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

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

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

つまり、<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 のバグ

再生率の極端な削除のためにミュートを解除しました

Chrome 64 より前は、playbackRate が 0.5 を下回るか 4 を上回ると音声がミュートされ、品質が大幅に低下していました。Chrome は品質低下のために Waveform-Similarity-Overlap-Add（WSOLA）アプローチに切り替えたため、音声をミュートする必要はありません。音を超高速で高速に再生できるのです

Chromium のバグ

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

メディア機能 - Decoding Info API

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

Windows 10 での HDR 動画再生

Windows と Mac の永続ライセンス

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

サポートされていない PlaybackRate により例外が発生します

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

再生率の極端な削除のためにミュートを解除しました

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

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