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() 的輸入序列平坦化為單一值。
解碼資訊會說明單對音訊和影片串流的品質 (流暢度和電源效率)，而不必對呼叫端做出決定。呼叫端仍應訂購媒體設定，就像與 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() 更多的提示。
Intent to Experiment | Chromestatus Tracker | Chromium Bug
HTMLVideoElement.playsInline
Chrome 現已支援 playsInline 布林屬性。如果存在，則會向瀏覽器提示，影片應預設在文件中以「內嵌」方式顯示，並受限於元素的播放區域。
同樣地，與 Safari 一樣，iPhone 上的影片元素在播放開始時不會自動進入全螢幕模式，這項提示可讓部分內嵌者享有自動全螢幕影片播放體驗。網頁開發人員可視需要使用這項功能，選擇退出這項體驗。
<video playsinline></video>
由於 Android 和電腦版的 Chrome 並未實作自動全螢幕模式，因此不會使用 playsInline 影片元素屬性提示。