Chrome 63/64 的媒體更新

François Beaufort
François Beaufort

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

您可以嘗試不同的媒體設定,直到找到最佳設定 (smoothpowerEfficient),然後使用該設定播放適當的媒體串流。順帶一提,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) 影片的對比度更高,可呈現精確、細緻的陰影和令人驚豔的亮部,畫面清晰度也比以往更高。此外,支援廣色域意味著色彩更鮮豔。

模擬 SDR 與 HDR 的比較 (如要觀看真正的 HDR 內容,必須使用 HDR 螢幕)
模擬 SDR 與 HDR 比較 (要觀看真正的 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 內容。

支援 HDR 的 YouTube 播放器畫質設定
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 範例,然後按照下列步驟操作:

  1. 前往 https://biograf-155113.appspot.com/ttt/episode-2/
  2. 按一下「可離線存取」,等待影片下載完成。
  3. 關閉網路連線。
  4. 按一下「播放」按鈕,即可觀看影片!

媒體預先載入預設為「中繼資料」

為了與其他瀏覽器的實作方式一致,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 影片所做的類似變更的後續追蹤。

Chromium 錯誤

移除極端播放速率的靜音功能

在 Chrome 64 之前,當 playbackRate 低於 0.5 或高於 4 時,系統會將音訊靜音,因為品質會大幅下降。由於 Chrome 已改用波形相似度重疊加法 (WSOLA) 方法來降低品質,因此聲音不必再靜音。也就是說,您現在可以播放超慢和超快的聲音。

Chromium 錯誤