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

François Beaufort
François Beaufort

Media Capabilities - Decoding Info API

現在、ウェブ デベロッパーは isTypeSupported() または canPlayType() を使用して、 一部のメディアがデコード可能かどうかを知ることができます。本当の問題は、 「このデバイスでの性能はどの程度ですか?」

これはまさに、提案されたメディア機能が求めているものの一つです 解決: デバイスのデコード機能をブラウザに照会する API コーデック、プロファイル、解像度、ビットレートなどの情報に基づき行われます。 は、再生がスムーズでなければならないか、 ブラウザで記録された過去の再生統計情報に基づいて、電力効率が向上します。

Decode 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.');
});

さまざまなメディア設定を試して最適なものが見つかるまで試す (smoothpowerEfficient)を取得し、それを使用して適切なメディアを再生します。 。なお、Chrome の現在の実装は、 記録されている再生情報を記録します。smooth を true として定義しています。割合が ドロップしたフレームの割合が 10% 未満である一方、powerEfficient はそれ以上の場合は true 50% を超えるフレームがハードウェアによってデコードされる小さいフレームは常に 電力効率が高いと考えられています

エラーが検出されないよう、下記のようなスニペットを使用することをおすすめします。 現在の実装にフォールバックできます。 この 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;
  });
}

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

デコード関数を使用するデベロッパーからできるだけ多くのフィードバックを Info API(Media Capabilities の一部)がある場合は、以前に Chrome 64 のオリジン トライアルでこの機能をご利用いただけます。

このトライアルは、2018 年 4 月に無事に終了しました。

テストの意図 | 出荷の意図 | Chromestatus トラッカー | Chromium のバグ

Windows 10 での HDR 動画再生

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

<ph type="x-smartling-placeholder">
</ph> シミュレーションによる SDR と HDR の比較(真の HDR を表示するには HDR ディスプレイが必要) <ph type="x-smartling-placeholder">
</ph> シミュレーションによる SDR と HDR の比較(真の HDR を表示するには HDR ディスプレイが必要)
をご覧ください。

Chrome for Windows 10 Fall で VP9 プロファイル 2 の 10 ビット再生がサポートされるようになりました。 クリエイター アップデート: Chrome が Windows 10 の場合、HDR 動画再生をサポート HDR モードになっている。技術面では、Chrome 64 で scRGB カラーがサポートされるようになりました これによりメディアを HDR で再生できるようになります。

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

<ph type="x-smartling-placeholder">
</ph> HDR を使用する YouTube プレーヤーの画質設定 <ph type="x-smartling-placeholder">
</ph> HDR を使用する YouTube プレーヤーの画質設定
をご覧ください。

今の作業に必要なのは Windows 10 Fall Creator Update だけです。 グラフィック カードとディスプレイ(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"'))
}

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

なお、CSScanvas保護されたコンテンツ。Chrome チームが現在対応中です。どうぞご期待ください。

Windows と Mac の永続ライセンス

Encrypted Media Extensions(EME)のパーシステント ライセンスでは、 アプリがライセンスをロードできるように、デバイスで永続化される サーバーにライセンス リクエストを送信する必要はありません。このように EME ではオフライン再生がサポートされています。

これまで、ChromeOS と Android は、永続的なアクセス トークンと ライセンスが必要です。もはや真実ではありません。保護されたコンテンツを EME 経由で再生しながら デバイスがオフラインになった場合は、Windows と Mac の Chrome 64 でも使用できるようになりました。

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 のサンプルをご覧ください。 手順は次のとおりです。

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

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

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

つまり、<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 超のいずれかです。試してみる 公式サンプル 実際の動作を見てみましょう

出荷の意向 | Chrome のステータス トラッカー | 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 のバグ