- 網頁開發人員現在可以預測播放內容是否流暢且省電。
- Chrome 現已支援 Windows 10 上的 HDR 影片播放功能。
- 我們現在支援在 Windows 和 Mac 上使用持續授權進行離線播放。
<video>
和<audio>
元素的預先載入預設值現在為"metadata"
。- 如果媒體播放速率不支援,現在會擲回錯誤。
- Chrome 現已暫停所有背景的純影片媒體。
- 對於極端的 playbackRate,系統不再將音訊設為靜音。
媒體功能 - 解碼資訊 API
目前,網頁開發人員必須依靠 isTypeSupported()
或 canPlayType()
,才能大致瞭解某些媒體是否可解碼。不過,真正的問題應該是:「這個裝置的效能如何?」
這正是建議的媒體功能要解決的問題之一:API 可根據編解碼器、設定檔、解析度、位元率等資訊,向瀏覽器查詢裝置的解碼能力。這項 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
定義為 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 (Media Capabilities 的一部分) 的開發人員那裡取得意見回饋,我們先前已在 Chrome 64 中新增這項功能,做為來源試用版。
試用方案已於 2018 年 4 月順利結束。
Intent to Experiment | Intent to Ship | Chromestatus Tracker | Chromium Bug
在 Windows 10 上播放 HDR 影片
高動態範圍 (HDR) 影片的對比度更高,可呈現精確、細緻的陰影和令人驚豔的亮部,畫面清晰度也比以往更高。此外,支援廣色域意味著色彩更鮮豔。
由於 Windows 10 的 Fall Creators Update 版本 Chrome 現已支援 VP9 Profile 2 10 位元播放功能,因此當 Windows 10 處於 HDR 模式時,Chrome 也支援 HDR 影片播放功能。技術說明:Chrome 64 現已支援 scRGB 色彩設定檔,可讓媒體以 HDR 播放。
你可以試試在 YouTube 上觀看The World in HDR in 4K (ULTRA HD),並查看 YouTube 播放器的畫質設定,確認是否播放 HDR 內容。
目前你只需要 Windows 10 秋季創作者更新、支援 HDR 的顯示卡和螢幕 (例如 NVIDIA 10 系列顯示卡、LG HDR 電視或螢幕),以及在 Windows 顯示設定中開啟 HDR 模式。
網頁開發人員可以使用最近的色域媒體查詢,偵測輸出裝置支援的近似色域,並使用 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"'))
}
在上述範例中,傳遞至 isTypeSupported()
的 Profile 2 的 VP9 轉碼器字串,需要根據您的影片編碼屬性進行更新。
請注意,目前無法在 CSS、畫布、圖片和受保護的內容中定義 HDR 顏色。Chrome 團隊正在處理這個問題。敬請持續鎖定!
Windows 和 Mac 適用的永久授權
加密媒體擴充功能 (EME) 中的永久授權,表示授權可在裝置上保留,讓應用程式不必向伺服器傳送其他授權要求,即可將授權載入記憶體。這是 EME 支援離線播放的方式。
目前只有 ChromeOS 和 Android 支援持續授權。但現在已非如此。在 Windows 和 Mac 上,Chrome 64 也能透過 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.
});
您可以試用永久授權,方法是查看Media PWA 範例,然後按照下列步驟操作:
- 前往 https://biograf-155113.appspot.com/ttt/episode-2/
- 按一下「可離線存取」,等待影片下載完成。
- 關閉網路連線。
- 按一下「播放」按鈕,即可觀看影片!
媒體預先載入預設為「中繼資料」
為了與其他瀏覽器的實作方式一致,Chrome 桌面版現在會將 <video>
和 <audio>
元素的預先載入預設值設為 "metadata"
,以減少頻寬和資源使用量。自 Chrome 64 版起,這項新行為只會套用至未設定預先載入值的情況。請注意,當 MediaSource
附加至媒體元素時,預先載入屬性的提示會遭到捨棄,因為網站會自行處理預先載入作業。
換句話說,<video>
預先載入值現在為 "metadata"
,而 <video
preload="auto">
預先載入值則維持 "auto"
。請試試官方範例。
意圖發布 | Chrome 狀態追蹤器 | Chromium 錯誤
不支援的 playbackRate 會引發例外狀況
在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 目前的實作會擲回這個例外狀況。請試試官方範例,瞭解實際運作方式。
意圖發布 | Chrome 狀態追蹤器 | Chromium 錯誤
背景影片音軌最佳化
Chrome 團隊一直在尋找新方法來改善電池續航力,Chrome 63 也不例外。
如果影片不含任何音軌,在 Chrome 電腦版 (Windows、Mac、Linux 和 ChromeOS) 中以背景模式 (例如在非顯示的分頁中) 播放時,影片會自動暫停。這項變更是針對 Chrome 62 中的 MSE 影片所做的類似變更的後續追蹤。
移除極端播放速率的靜音功能
在 Chrome 64 之前,當 playbackRate
低於 0.5 或高於 4 時,系統會將音訊靜音,因為品質會大幅下降。由於 Chrome 已改用波形相似度重疊加法 (WSOLA) 方法來降低品質,因此聲音不必再靜音。也就是說,您現在可以播放超慢和超快的聲音。