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
影片元素屬性提示。