Chrome 73 版媒體更新

François Beaufort
François Beaufort
GitHub

本文將介紹 Chrome 73 的新功能，包括：

硬體媒體金鑰支援

如今，許多鍵盤都提供控制基本媒體播放功能的按鍵，例如播放/暫停、上一首和下一首。耳機也具備這些功能。目前，電腦版使用者無法使用這些媒體鍵控制 Chrome 中的音訊和影片播放。這會在今天改變！

鍵盤媒體鍵
鍵盤媒體鍵

使用者按下暫停鍵後，Chrome 中播放的有效媒體元素會暫停，並收到「已暫停」媒體事件。按下播放鍵後，系統會繼續執行先前暫停的媒體元素，並收到「播放」媒體事件。無論 Chrome 是在前景或背景運作，都能正常運作。

在 ChromeOS 中，使用音訊焦點的 Android 應用程式現在會指示 Chrome 暫停及繼續播放音訊，讓 Chrome、Chrome 應用程式和 Android 應用程式中的網站之間享有流暢的媒體體驗。這項功能目前僅適用於搭載 Android P 的 ChromeOS 裝置。

簡單來說，建議您一律監聽這些媒體事件，並據以採取行動。

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

等一下，好處可不只這些！有了 Media Session API (僅在行動裝置上支援)，網路開發人員就能處理媒體相關事件，例如媒體金鑰觸發的追蹤變更。目前支援 previoustrack 和 nexttrack 事件。

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

Chrome 會自動處理播放和暫停按鍵，不過，如果預設行為無法滿足您的需求，您仍然可以針對「播放」和「暫停」設定一些動作處理常式，避免這種情況發生。

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

硬體媒體金鑰支援 ChromeOS、macOS 和 Windows 系統。Linux 日後將推出

請參閱現有的開發人員說明文件，並試用官方媒體工作階段範例。

Chromestatus Tracker | Chromium 錯誤

加密媒體：HDCP 政策檢查

借助 HDCP Policy Check API，網頁程式開發人員現在可以查詢特定政策 (例如 HDCP 需求) 能否在要求寬版授權和載入媒體「之前」強制執行。

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

這個 API 適用於所有平台。然而，實際的政策檢查可能無法在某些平台上執行。舉例來說，在 Android 和 Android WebView 上，HDCP 政策檢查承諾會拒絕 NotSupportedError。

請參閱先前的開發人員說明文件，並嘗試使用官方範例，查看所有支援的 HDCP 版本。

Intent to Ship | Chromestatus Tracker | Chromium 錯誤

已安裝 PWA 的自動子母畫面功能來源試用

部分網頁可能希望自動為影片元素進入及保留「子母畫面」功能；例如，視訊會議網頁應用程式會因為使用者在網頁應用程式和其他應用程式或分頁之間切換，而採用自動子母畫面的行為。但如果符合使用者手勢要求，就難以辦到。啟用自動子母畫面功能了嗎？

為支援這些分頁和應用程式切換，系統會在 <video> 元素中新增 autopictureinpicture 屬性。

<video autopictureinpicture></video>

以下是大致運作方式：

  • 文件隱藏時，如果系統允許，最近設定的 autopictureinpicture 屬性影片元素將自動進入子母畫面。
  • 當文件顯示時，子母畫面中的影片元素會自動退出。

大功告成！請注意，自動子母畫面功能僅適用於使用者已安裝在電腦上的漸進式網頁應用程式。

詳情請參閱spec，並試用官方 PWA 範例。

實驗意圖 | Chromestatus Tracker | Chromium 錯誤

子母畫面視窗中略過廣告的來源試用

影片廣告模式通常包含片頭廣告。內容供應者通常可在廣告播放幾秒後略過廣告。遺憾的是，由於「子母畫面」視窗不具互動性，使用子母畫面觀看影片的使用者目前無法做到。

有了 Media Session API (先前僅適用於行動裝置)，您可以使用新的 skipad 媒體工作階段動作，在子母畫面中提供這個選項。

子母畫面視窗中的略過廣告按鈕
子母畫面視窗中的「略過廣告」按鈕

如要提供這項功能，請在呼叫 setActionHandler() 時傳遞含有 skipad 的函式。如要隱藏票證 null，如以下所示，這是相當直接的。

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}

歡迎試用官方的「略過廣告」範例，並告訴我們這項功能如何改善。

實驗意圖 | Chromestatus Tracker | Chromium 錯誤

電腦版 PWA 的自動播放功能

漸進式網頁應用程式已可在所有電腦平台正常運作，但現在我們進一步將這項規則擴大到電腦端，讓已安裝的 PWA 可以支援「自動播放」音效。請注意，這個範圍僅適用於網頁應用程式資訊清單範圍的頁面。

Chromium 錯誤