- ウェブ デベロッパーは、再生がスムーズで電力効率がよいかどうかを予測できるようになりました。
- 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 と定義します。スモールフレームは常に電力効率が良いとみなされます。
下記のようなスニペットを使用して可用性を検出し、この 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(メディア機能の一部)を実際に利用しているデベロッパーから可能な限り多くのフィードバックをいただくため、Google は以前、この機能をオリジン トライアルとして Chrome 64 に追加しました。
トライアルは 2018 年 4 月に終了しました。
テストの目的 | リリースの目的 | Chromestatus トラッカー | Chromium のバグ
Windows 10 での 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 動画にのみ適用されていた同様の変更のフォローアップです。
再生率の極端な削除のためにミュートを解除しました
Chrome 64 より前は、playbackRate
が 0.5 を下回るか 4 を上回ると音声がミュートされ、品質が大幅に低下していました。Chrome は品質低下のために Waveform-Similarity-Overlap-Add(WSOLA)アプローチに切り替えたため、音声をミュートする必要はありません。音を超高速で高速に再生できるのです