- 網頁程式開發人員現在可以預測播放速度是否順暢、更有效率。
- Chrome 現已支援在 Windows 10 上播放 HDR 影片。
- 使用永久授權離線播放 現已支援 Windows 和 Mac
<video>
和 預設預先載入值<audio>
元素現在是"metadata"
。- 系統現在會擲回錯誤 不支援播放速率。
- Chrome 現在會暫停所有背景影片媒體。
- 音訊不再靜音: 極度播放率
媒體功能 - 解碼資訊 API
目前網頁程式開發人員仰賴 isTypeSupported()
或 canPlayType()
瞭解部分媒體能否解碼真正的問題應該是:
「這部裝置上效能如何?」
這正是受眾提議的媒體功能要實現的其中一項 challenge:運用這個 API 查詢瀏覽器關於裝置解碼功能的資訊 偵測程式語言 都會公開許多資訊,例如播放是否流暢 耗電量。
簡單來說,以下為解碼 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 目前的實作是以先前為基礎的
錄下的播放資訊表示在百分比值時,smooth
會定義為 true
捨棄的影格比例低於 10%,而 powerEfficient
為 true,
超過 50% 的影格是由硬體解碼不論畫面大小為何
省電模式
建議您使用類似下方的程式碼片段來偵測 並改回使用現行的導入方式 不支援這個 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;
});
}
適用於來源試用
為了盡可能地收集開發人員使用解碼功能的意見回饋 這個欄位中的 Info API (屬於媒體功能的一部分),我們先前 功能做為來源試用。
試用期已於 2018 年 4 月順利完成。
意圖進行實驗 | 有意出貨 | Chromestatus Tracker | Chromium 錯誤
在 Windows 10 上播放 HDR 影片
高動態範圍 (HDR) 影片具有更高的對比度、更精確地呈現 更清晰的陰影和令人驚豔的高亮度表現。更多 支援廣色域,表示顏色更加鮮豔。
由於 Windows 10 秋季適用的 Chrome 現已支援 VP9 Profile 2 播放 10 位元版本 創作者更新:Chrome 在 Windows 10 時額外支援 HDR 影片播放功能 處於 HDR 模式根據技術說明,Chrome 64 現在支援 scRGB 顏色 系統就能以 HDR 模式播放媒體
歡迎在 YouTube 上觀看以 4K 畫質呈現的世界 (ULTRA HD) 影片,實際體驗看看吧! 確認 YouTube 播放器畫質設定,確認是否能夠播放 HDR 影片
你現在只需前往 Windows 10 秋季創作者最新消息 (支援 HDR 技術) 即可 顯示卡和顯示器 (例如 NVIDIA 10-Series 卡、LG HDR TV 或顯示器) 然後在 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"'))
}
帶有 Profile 2 的 VP9 轉碼器字串,已傳遞至 isTypeSupported()
中的
範例需要根據影片編碼屬性進行更新。
請注意,目前無法在 CSS、canvas 中定義 HDR 顏色。 和受保護的內容。Chrome 團隊正在努力處理中。敬請持續鎖定!
Windows 和 Mac 的永久授權
Encrypted Media Extensions (EME) 中的永久授權是指授權可以 會保留在裝置上,以便應用程式將授權載入 而不必傳送其他授權要求至伺服器。這是 EME 都支援離線播放功能。
截至目前為止,只有 ChromeOS 和 Android 才是支援永久支援 份授權。事實上,透過 EME 播放受保護的內容 您現在可以在 Windows 和 Mac 上使用 Chrome 64 將裝置離線。
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"
。不妨試試官方版範例。
有意出貨 | Chromestatus Tracker | Chromium 錯誤
不支援的 playRate 引發例外狀況
隨著 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
}
對了,目前 Chrome 的實作方式會在
playbackRate
為負數、小於 0.0625 或大於 16。立即體驗
請參閱官方範例
觀看說明
有意出貨 | Chromestatus Tracker | Chromium 錯誤
背景影片追蹤最佳化
Chrome 團隊一直在尋找新的方法來延長電池續航力 Chrome 63 也不例外。
如果影片不含任何音軌,系統就會自動產生影片 在 Chrome 在背景 (例如隱藏的分頁) 播放時暫停 電腦 (Windows、Mac、Linux 和 ChromeOS)。這是來自 (僅適用於 Chrome 62 中的 MSE 影片)。
針對極端播放率移除靜音設定
在 Chrome 64 以下版本中,當 playbackRate
低於 0.5 以上時,音效會設為靜音
品質則明顯下降Chrome 改用
「波形相似度-重疊-加法」(WSOLA) 做法可提升音質
不需要調低靜音了換句話說,您可以極速播放音效
速度飛快。