Chrome のメディア機能はバージョン 75 で更新されました。この記事では、次の新機能について説明します。
- 暗号化されたメディアの再生がスムーズで電力効率が高いかどうかを予測する。
- 動画要素の
playsInline属性のヒントのサポート。
暗号化されたメディア: デコード情報
Chrome 66 以降、ウェブ デベロッパーは デコード情報を使用して、コーデック、プロファイル、解像度、ビットレートなどの情報に基づいて、デバイスのクリア コンテンツのデコード能力についてブラウザにクエリを実行できるようになりました。これは、ブラウザによって記録された過去の再生統計情報に基づいて、再生がスムーズ（タイムリー）で電力効率が高いかどうかを示します。
その後、Decoding Info を定義する Media Capabilities API 仕様が更新され、暗号化されたメディア構成も処理されるようになりました。これにより、暗号化されたメディア（EME）を使用するウェブサイトが最適なメディア ストリームを選択できるようになりました。
EME のデコード情報の仕組みを簡単に説明しましょう。公式サンプルをお試しください。
const encryptedMediaConfig = {
type: 'media-source', // or 'file'
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
},
keySystemConfiguration: {
keySystem: 'com.widevine.alpha',
videoRobustness: 'SW_SECURE_DECODE' // Widevine L3
}
};
navigator.mediaCapabilities.decodingInfo(encryptedMediaConfig).then(result => {
if (!result.supported) {
console.log('Argh! This encrypted media configuration is not supported.');
return;
}
if (!result.keySystemAccess) {
console.log('Argh! Encrypted media support is not available.')
return;
}
console.log('This encrypted media configuration is supported.');
console.log('Playback should be' +
(result.smooth ? '' : ' NOT') + ' smooth and' +
(result.powerEfficient ? '' : ' NOT') + ' power efficient.');
// TODO: Use `result.keySystemAccess.createMediaKeys()` to setup EME playback.
});
EME 再生には、デコードとレンダリングの専用コードパスがあります。つまり、クリア再生とは異なるコーデックのサポートとパフォーマンスになります。したがって、navigator.mediaCapabilities.decodingInfo() に渡されるメディア構成オブジェクトで、新しい keySystemConfiguration キーを設定する必要があります。このキーの値は、いくつかの既知の EME タイプを保持する辞書です。これにより、EME の requestMediaKeySystemAccess() に提供された入力が複製されます。大きな違いが 1 つあります。それは、requestMediaKeySystemAccess() に提供される入力のシーケンスが、requestMediaKeySystemAccess() がサポートするサブセットを選択するように意図されている場合であれば、常に単一の値にフラット化されるということです。
Decoding Info は、呼び出し元の決定を下すことなく、1 組の音声ストリームと動画ストリームのサポートの品質（スムーズさと電力効率）を記述します。呼び出し元は、requestMediaKeySystemAccess() の場合と同様にメディア構成を注文する必要があります。ただし、リストを自身で走査します。
navigator.mediaCapabilities.decodingInfo() は、supported、smooth、powerEfficient の 3 つのブール値を含むオブジェクトで非同期的に解決される Promise を返します。ただし、keySystemConfiguration キーが設定され、supported が true の場合、keySystemAccess という名前の別の MediaKeySystemAccess オブジェクトも返されます。一部のメディアキーをリクエストし、暗号化されたメディアの再生を設定するために使用できます。次の例をご覧ください。
// Like rMSKA(), orderedMediaConfigs is ordered from most to least wanted.
const capabilitiesPromises = orderedMediaConfigs.map(mediaConfig =>
navigator.mediaCapabilities.decodingInfo(mediaConfig)
);
// Assume this app wants a supported and smooth media playback.
let bestConfig = null;
for await (const result of capabilitiesPromises) {
if (result.supported && result.smooth) {
bestConfig = result;
break;
}
}
if (bestConfig) {
const mediaKeys = await bestConfig.keySystemAccess.createMediaKeys();
// TODO: rest of EME path as-is
} else {
// Argh! No smooth configs found.
// TODO: Maybe choose the lowest resolution and framerate available.
}
暗号化されたメディアのデコード情報には HTTPS が必要です。
また、requestMediaKeySystemAccess() と同様に、Android と ChromeOS でユーザー プロンプトがトリガーされる可能性があります。暗号化されたメディアの再生を設定するために呼び出し回数が増えますが、requestMediaKeySystemAccess() よりも多くのプロンプトは表示されません。
テストの目的 | Chromestatus Tracker | Chromium バグ
HTMLVideoElement.playsInline
Chrome でブール値属性 playsInline がサポートされるようになりました。存在する場合、動画はデフォルトでドキュメント内に「インライン」で表示され、要素の再生領域に制限される必要があることをブラウザに示します。
Safari と同様に、iPhone の動画要素は再生開始時に自動的に全画面表示モードになりませんが、一部の埋め込みでは、このヒントを使用して動画を自動で全画面表示できます。ウェブ デベロッパーは、必要に応じてこの機能をオプトアウトできます。
<video playsinline></video>
Android 版 Chrome とパソコン版 Chrome では自動全画面表示が実装されていないため、playsInline 動画要素属性のヒントは使用されません。