Chrome 73 版媒體更新

François Beaufort
François Beaufort
GitHub

在本文中，我們將介紹 Chrome 73 版的媒體功能，包括：

硬體媒體金鑰支援

許多鍵盤現在都有按鍵可控制基本的媒體播放功能，例如 播放/暫停、上一首和下一首曲目耳機也都支援。在此之前， 電腦使用者無法使用這些媒體鍵控制音訊和影片播放 。今天的改變！

鍵盤媒體鍵
鍵盤媒體鍵

當使用者按下暫停鍵時，Chrome 會播放正在播放的媒體元素 並收到「已暫停」媒體事件。按下播放鍵後， 將繼續播放先前暫停的媒體元素，並發出「播放」媒體 活動。無論是在前景或背景使用 Chrome，都能正常運作。

在 ChromeOS 中，使用音訊焦點的 Android 應用程式現在會指示 Chrome 暫停並 繼續播放音訊，以便在 Chrome、使用 Chrome、離開網站時提供流暢的媒體體驗。 Chrome 應用程式和 Android 應用程式。這項功能目前僅適用於 ChromeOS 搭載 Android P 的裝置

簡單來說，建議您隨時監聽這些媒體事件，並採取行動 。

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 錯誤

Encrypted Media：HDCP 政策檢查

多虧有 HDCP Policy Check API，網頁開發人員現在可以查詢 特定政策，例如HDCP 規定，可在要求「之前」強制執行 Widevine 授權及載入媒體。

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

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

這個 API 適用於所有平台。不過，實際的政策檢查可能 不支援某些平台例如：HDCP 政策檢查承諾 將會在 Android 和 Android WebView 上拒絕 NotSupportedError。

請參閱我們的先前的開發人員說明文件，試試看官方 範例，即可查看支援的所有 HDCP 版本。

有意出貨 | Chromestatus Tracker | Chromium 錯誤

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

某些網頁可能想自動進入及保留「子母畫面」 影片元素；例如，視訊會議網頁應用程式 使用者在切換及切換畫面時，自動切換子母畫面行為 網頁應用程式、其他應用程式或分頁雖然使用 使用者手勢需求。那就介紹自動子母畫面功能！

為了支援這些分頁和應用程式切換，新的 autopictureinpicture 屬性 就會加入 <video> 元素。

<video autopictureinpicture></video>

大致說明如下：

  • 文件設為隱藏時，autopictureinpicture 的影片元素 屬性是最近設為自動輸入子母畫面的屬性。 。
  • 文件顯示後，子母畫面中的影片元素 就會自動離開

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

相關詳情請參閱規格，並嘗試使用官方 PWA 範例。

意圖進行實驗 | Chromestatus Tracker | Chromium 錯誤

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

影片廣告模型通常包含片頭廣告。內容 供應商通常會在廣告播放幾秒後略過廣告。遺憾的是， 因為子母畫面視窗不具互動性， 子母畫面功能目前不支援這項操作。

Media Session API 現已支援桌機 (支援 才會使用新的行動裝置)，可使用新的 skipad 媒體工作階段動作，提供這項功能 「子母畫面」選項。

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

如要提供這項功能，請在呼叫時透過 skipad 傳遞函式 setActionHandler()。如要隱藏，請傳遞 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 錯誤