Chrome 的媒體功能已在第 75 版更新。本文將討論這些新功能，包括：
- 預測加密媒體的播放作業是否順暢且省電。
- 支援影片元素的
playsInline屬性提示。
加密媒體：解碼資訊
自 Chrome 66 版起，網頁程式開發人員已可使用解碼資訊，查詢瀏覽器根據轉碼器、設定檔、解析度、位元率等資訊，查詢裝置清楚的內容解碼能力。這項參數會指出播放作業是否能順暢 (及時) 並有效利用瀏覽器記錄的播放統計資料。
經過更新，定義解碼資訊的 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() 的輸入，有一項主要差異：提供給 requestMediaKeySystemAccess() 的輸入序列會扁平化為單一值，只要序列的意圖是讓 requestMediaKeySystemAccess() 選擇所支援的子集即可。
解碼 Info 是指單一音訊和視訊串流支援品質 (流暢度和電源效率)，而無需為呼叫端做出決定。呼叫端仍應按照 requestMediaKeySystemAccess() 的順序排列媒體設定。但現在他們自己才去步行清單。
navigator.mediaCapabilities.decodingInfo() 會傳回承諾，且會以包含三個布林值的物件 (supported、smooth 和 powerEfficient) 以非同步方式解析。不過，如果設定了 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 並未實作自動全螢幕，因此不會使用 playsInline 影片元素屬性提示。