- 網頁程式開發人員現在可以預測播放體驗是否順暢且省電。
- Chrome 現已支援在 Windows 10 上播放 HDR 影片。
- Windows 和 Mac 現已支援透過永久授權離線播放。
<video>
和<audio>
元素的預設預先載入值現在是"metadata"
。- 現在如果不支援媒體播放率,系統會擲回錯誤。
- Chrome 現在會暫停所有僅限背景播放的媒體內容。
- 基於極端播放速率,音訊不再設為靜音。
媒體功能 - 解碼資訊 API
現今的網頁開發人員需要使用 isTypeSupported()
或 canPlayType()
,才能明確得知某些媒體是否可解碼。真正的問題應該是
「這部裝置在裝置上的表現如何?」
這正是我們提議的媒體功能想解決的其中一個問題:這個 API 會根據轉碼器、設定檔、解析度、位元率等資訊,向瀏覽器查詢裝置解碼能力。這項資訊會顯示相關資訊,例如根據瀏覽器先前記錄的播放統計資料,以及是否應該流暢地播放。
簡單來說,以下是 Decoding Info API 的運作方式。請參閱官方範例。
const mediaConfig = {
type: 'media-source', // or 'file'
audio: {
contentType: 'audio/webm; codecs=opus',
channels: '2', // audio channels used by the track
bitrate: 132266, // number of bits used to encode a second of audio
samplerate: 48000 // number of samples of audio carried per second
},
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
}
};
navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => {
console.log('This configuration is' +
(result.supported ? '' : ' NOT') + ' supported,' +
(result.smooth ? '' : ' NOT') + ' smooth and' +
(result.powerEfficient ? '' : ' NOT') + ' power efficient.');
});
您可以先嘗試不同的媒體設定,直到找出最適合的媒體設定 (smooth
和 powerEfficient
),並使用該設定播放適當的媒體串流。順帶一提,目前的 Chrome 實作是根據先前記錄的播放資訊來實作。如果捨棄的影格百分比低於 10%,smooth
會將 smooth
定義為 true,而當硬體解碼超過 50% 的影格時,powerEfficient
為 true。小型影格一律視為省電
建議您使用類似於下方的程式碼片段偵測可用性,並針對不支援此 API 的瀏覽器,改回目前的實作方式。
function isMediaConfigSupported(mediaConfig) {
const promise = new Promise((resolve, reject) => {
if (!('mediaCapabilities' in navigator)) {
return reject('MediaCapabilities API not available');
}
if (!('decodingInfo' in navigator.mediaCapabilities)) {
return reject('Decoding Info not available');
}
return resolve(navigator.mediaCapabilities.decodingInfo(mediaConfig));
});
return promise.catch(_ => {
let fallbackResult = {
supported: false,
smooth: false, // always false
powerEfficient: false // always false
};
if ('video' in mediaConfig) {
fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.video.contentType);
if (!fallbackResult.supported) {
return fallbackResult;
}
}
if ('audio' in mediaConfig) {
fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.audio.contentType);
}
return fallbackResult;
});
}
適用於來源試用
為了盡可能獲得開發人員在現場使用 Decoding Info API (媒體功能的一部分) 的意見回饋,我們先前在 Chrome 64 中新增這項功能做為來源試用。
試用期已成功於 2018 年 4 月結束。
實驗意圖 | 意圖出貨 | Chromestatus Tracker | Chromium 錯誤
在 Windows 10 上播放 HDR 影片
高動態範圍 (HDR) 影片的對比度更高,可顯示精確、細緻的陰影和醒目的高亮度,比以往更加清晰。進一步支援廣色域,代表顏色更加鮮豔。
Windows 10 秋季創作者更新適用的 Chrome 現已支援 VP9 Profile 2 10 位元播放,因此當 Windows 10 處於 HDR 模式時,Chrome 還支援播放 HDR 影片。在技術說明中,Chrome 64 現在支援 scRGB 色彩設定檔,後者可讓媒體以 HDR 形式播放。
只要在 YouTube 上觀看 The World in HDR (ULTRA HD),然後查看 YouTube 播放器品質設定,確認影片是否能播放 HDR 影片。
現在只需使用 Windows 10 秋季創作者更新,這個與 HDR 相容的顯示卡和顯示螢幕 (例如 NVIDIA 10 系列卡、LG HDR TV 或螢幕) 並在 Windows 顯示設定中開啟 HDR 模式即可。
網頁開發人員可以透過最近的 color-gamut 媒體查詢,以及使用 screen.colorDepth,在螢幕上顯示色彩的位元數,偵測輸出裝置支援的概略色域。以下為偵測執行個體是否支援 VP9 HDR 的其中一種方式:
// Detect if display is in HDR mode and if browser supports VP9 HDR.
function canPlayVp9Hdr() {
// TODO: Adjust VP9 codec string based on your video encoding properties.
return (window.matchMedia('(color-gamut: p3)').matches &&
screen.colorDepth >= 48 &&
MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10.01.09.16.09.01"'))
}
在上述範例中,將設定檔 2 傳遞至 isTypeSupported()
的 VP9 轉碼器字串需要根據影片編碼屬性進行更新。
請注意,目前還無法定義 CSS 色彩、畫布、圖片和受保護的內容。Chrome 團隊正在努力解決問題。敬請期待!
Windows 和 Mac 適用的永久授權
加密媒體擴充功能 (EME) 中的永久授權是指授權可保存在裝置上,因此應用程式不必傳送其他授權要求給伺服器,即可將授權載入記憶體。這就是 EME 支援離線播放功能的方式
在此之前,ChromeOS 和 Android 是唯一支援永久授權的平台。但現在已不復存在。在裝置離線時,Windows 和 Mac 使用者也可透過 EME 播放受保護的內容。
const config = [{
sessionTypes: ['persistent-license'],
videoCapabilities: [{
contentType: 'video/webm; codecs="vp09.00.10.08"',
robustness: 'SW_SECURE_DECODE' // Widevine L3
}]
}];
navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
// User will be able to watch encrypted content while being offline when
// license is stored locally on device and loaded later.
})
.catch(error => {
// Persistent licenses are not supported on this platform yet.
});
您可以參閱「媒體 PWA 範例」,並按照下列步驟操作,自行試用永久授權:
- 前往 https://biograf-155113.appspot.com/ttt/episode-2/
- 按一下 [允許離線觀看],然後等待影片下載。
- 關閉網際網路連線。
- 按一下「播放」按鈕,開始觀看影片!
媒體預先載入預設為「metadata」
為了配合其他瀏覽器的導入方式,Chrome 電腦版現在會將 <video>
和 <audio>
元素的預設預先載入值設為 "metadata"
,以減少頻寬和資源用量。從 Chrome 64 版開始,這個新行為僅適用於未設定預先載入值的情況。請注意,當網站將 MediaSource
附加至媒體元素時,系統會捨棄預先載入屬性的提示,因為網站會自行處理預先載入作業。
換句話說,<video>
的預先載入值現在是 "metadata"
,而 <video
preload="auto">
預先載入值則維持 "auto"
。不妨試試官方範例。
Intent to Ship | Chromestatus Tracker | Chromium 錯誤
不支援的播放速率會引發例外狀況
HTML 規格變更後,當媒體元素的 playbackRate
設為 Chrome 不支援的值 (例如負值) 時,Chrome 63 會擲回 "NotSupportedError"
DOMException
。
const audio = document.querySelector('audio');
try {
audio.playbackRate = -1;
} catch(error) {
console.log(error.message); // Failed to set the playbackRate property
}
順帶一提,當 playbackRate
是負數、小於 0.0625 或大於 16 時,Chrome 目前的實作會引發這個例外狀況。請試用官方範例,瞭解實際範例。
Intent to Ship | Chromestatus Tracker | Chromium 錯誤
背景影片追蹤最佳化
Chrome 團隊不斷嘗試找出能延長電池續航力的新方法,Chrome 63 也不例外。
如果影片不含任何音軌,系統將在 Windows、Mac、Linux 和 ChromeOS 的背景中,於背景播放影片時自動暫停播放 (例如使用未顯示的分頁)。這是我們先前根據 Chrome 62 版中的 MSE 影片變更的類似變更項目。
移除對極端播放率的靜音
在 Chrome 64 之前的版本中,當 playbackRate
低於 0.5 或以上 4 時,其音質會大幅降低,使聲音靜音。由於 Chrome 改用 Waveform-Similarity-Overlap-Add (WSOLA) 方法來降低品質,不再需要將音效設為靜音。這表示你現在播放的聲音
速度會超慢,而且播放速度會更快