Chrome のメディア機能はバージョン 75 で更新されました。この記事では、以下を含む新しい機能について説明します。
- 暗号化されたメディアの再生がスムーズで電力効率がよいかどうかの予測。
- 動画要素の
playsInline属性のヒントのサポート。
暗号化されたメディア：デコード情報
Chrome 66 以降、ウェブ デベロッパーは Decoding Info（デコード情報）を使用して、コーデック、プロファイル、解像度、ビットレートなどの情報を基に、デバイスのクリア コンテンツ デコード機能をブラウザにクエリできます。これは、ブラウザで記録された以前の再生統計情報に基づいて、再生がスムーズ（タイムリー）で電力効率が良いかどうかを示します。
Decoding Info を定義する Media Capabilities API の仕様は、暗号化されたメディア構成を処理するように更新され、暗号化されたメディア（EME）を使用するウェブサイトが最適なメディア ストリームを選択できるようになりました。
簡単に言うと、こちらが EME の Decoding Info の仕組みです。公式サンプルをお試しください。
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() がサポートするサブセットを選択することが目的であれば、単一の値にフラット化されます。
デコード情報は、呼び出し元に決定権を与えることなく、音声ストリームと動画ストリームの単一ペアのサポートの品質（スムーズさと電力効率）を示します。呼び出し元は、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 が必要です。
また、Android と ChromeOS では、requestMediaKeySystemAccess() と同じ方法でユーザー プロンプトがトリガーされることがあります。ただし、暗号化されたメディアの再生を設定するためにより多くの呼び出しが必要になるにもかかわらず、requestMediaKeySystemAccess() より多くのプロンプトが表示されることはありません。
テストの目的 | Chromestatus トラッカー | Chromium のバグ
HTMLVideoElement.playsInline
Chrome でブール値属性 playsInline がサポートされるようになりました。この属性を指定すると、動画はデフォルトでドキュメント内に「インライン」で表示されるようにブラウザに伝えることができます（要素の再生エリア内に制限されます）。
iPhone の動画要素が再生開始時に自動的に全画面モードにならない Safari と同様に、このヒントにより、一部のエンベダーで動画再生を自動的に全画面表示できるようになります。ウェブ デベロッパーは必要に応じてこの機能をオプトアウトできます。
<video playsinline></video>
Android 版とパソコン版の Chrome では自動全画面表示が実装されていないため、playsInline 動画要素の属性ヒントは使用されません。