- 網頁程式開發人員現在可以預測播放速度是否順暢、更有效率。
- Chrome 現已支援在 Windows 10 上播放 HDR 影片。
- 我們現在支援在 Windows 和 Mac 上使用持續授權進行離線播放。
<video>
和<audio>
元素的預先載入預設值現在為"metadata"
。- 當媒體播放速率不支援時,現在會擲回錯誤。
- Chrome 現已暫停所有背景的純影片媒體。
- 對於極端的 playbackRate,系統不再將音訊設為靜音。
媒體功能 - 解碼資訊 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
定義為 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 播放。
歡迎試用 4K 的 HDR 世界 (ULTRA HD),前往 YouTube 觀看,然後查看 YouTube 播放器畫質設定,確認是否能播放 HDR 影片。
目前你只需要 Windows 10 秋季創作者更新、支援 HDR 的顯示卡和螢幕 (例如 NVIDIA 10 系列顯示卡、LG HDR 電視或螢幕),以及在 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"'))
}
在上述範例中,傳遞至 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"
。歡迎試用官方範例。
Intent to Ship | 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 目前的實作會擲回這個例外狀況。請試試官方範例,瞭解實際運作方式。
Intent to Ship | Chrome 狀態追蹤器 | Chromium 錯誤
背景影片追蹤最佳化
Chrome 團隊一直在尋找新方法來改善電池續航力,Chrome 63 也不例外。
如果影片不含任何音軌,在 Chrome 桌面版 (Windows、Mac、Linux 和 ChromeOS) 中以背景模式播放 (例如在非顯示分頁中) 時,影片會自動暫停。這項變更是針對 Chrome 62 中的 MSE 影片所做的類似變更的後續追蹤。
移除極端播放速率的靜音功能
在 Chrome 64 之前,當 playbackRate
低於 0.5 或高於 4 時,系統會將音訊靜音,因為品質會大幅下降。由於 Chrome 已改用波形相似度重疊加法 (WSOLA) 方法來降低品質,因此聲音不必再靜音。換句話說
你現在能以超慢速度播放音效