Chrome 63/64 的媒體更新

François Beaufort
François Beaufort

媒體功能 - 解碼資訊 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.');
});

你可以嘗試不同的媒體設定,直到找出最適合的媒體設定 (smoothpowerEfficient) 並用於播放適當的媒體 串流。對了,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) 影片具有更高的對比度、更精確地呈現 更清晰的陰影和令人驚豔的高亮度表現。更多 支援廣色域,表示顏色更加鮮豔。

模擬 SDR 與 HDR 比較 (觀看真實 HDR 需要有 HDR 螢幕)
模擬 SDR 與 HDR 比較 (觀看真實 HDR 需要有 HDR 螢幕)

由於 Windows 10 秋季適用的 Chrome 現已支援 VP9 Profile 2 播放 10 位元版本 創作者更新:Chrome 在 Windows 10 時額外支援 HDR 影片播放功能 處於 HDR 模式根據技術說明,Chrome 64 現在支援 scRGB 顏色 系統就能以 HDR 模式播放媒體

歡迎在 YouTube 上觀看以 4K 畫質呈現的世界 (ULTRA HD) 影片,實際體驗看看吧! 確認 YouTube 播放器畫質設定,確認是否能夠播放 HDR 影片

以 HDR 模式呈現的 YouTube 播放器畫質設定
以 HDR 模式呈現的 YouTube 播放器畫質設定

你現在只需前往 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() 中的 範例需要根據影片編碼屬性進行更新。

請注意,目前無法在 CSScanvas 中定義 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 範例,自行試用永久授權 步驟如下:

  1. 前往 https://biograf-155113.appspot.com/ttt/episode-2/
  2. 按一下 [允許離線存取]並等待影片下載完成
  3. 關閉網際網路連線。
  4. 按一下「播放」按鈕,盡情觀賞影片!

媒體預先載入的預設值為「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 影片)。

Chromium 錯誤

針對極端播放率移除靜音設定

在 Chrome 64 以下版本中,當 playbackRate 低於 0.5 以上時,音效會設為靜音 品質則明顯下降Chrome 改用 「波形相似度-重疊-加法」(WSOLA) 做法可提升音質 不需要調低靜音了換句話說,您可以極速播放音效 速度飛快。

Chromium 錯誤