Chrome 63/64 的媒體更新

François Beaufort
François Beaufort
GitHub

媒體功能 - 解碼資訊 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) 影片的對比度更高，可顯示精確、細緻的陰影和醒目的高亮度，比以往更加清晰。進一步支援廣色域，代表顏色更加鮮豔。

模擬 SDR 與 HDR 的比較 (想看到真正的 HDR 螢幕時需要用到 HDR 螢幕)
模擬 SDR 與 HDR 的比較情形 (想看到真正的 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 影片。

採用 HDR 的 YouTube 播放器畫質設定
支援 HDR 的 YouTube 播放器畫質設定

現在只需使用 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 範例」，並按照下列步驟操作，自行試用永久授權：

  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"。不妨試試官方範例。

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 影片變更的類似變更項目。

Chromium 錯誤

移除對極端播放率的靜音

在 Chrome 64 之前的版本中，當 playbackRate 低於 0.5 或以上 4 時，其音質會大幅降低，使聲音靜音。由於 Chrome 改用 Waveform-Similarity-Overlap-Add (WSOLA) 方法來降低品質，不再需要將音效設為靜音。這表示你現在播放的聲音 速度會超慢，而且播放速度會更快

Chromium 錯誤