【譯】Chrome 73版本關於Audio/Video的更新

原文地址：developers.google.com/web/updates…

在本文中，我將討論Chrome 73新媒體功能，其中包括

• 如今支持經過媒體按鍵來控制桌面上的媒體播放。
• Web開發人員能夠查詢是否能夠實施某個HDCP策略。
• 桌面PWA應用自動畫中畫，畫中畫中的「跳過廣告」正在試驗階段。
• 桌面PWA容許自動播放聲音

1、Media鍵盤按鍵支持

許多鍵盤現在已有按鍵能夠控制基礎Media背景播放功能，例如播放/暫停，上一首/下一首。耳機也有它們。到目前爲止，桌面用戶沒法使用這些媒體鍵來控制Chrome中的音頻和視頻播放。而如今一切都變了！

若是用戶按下了暫停鍵，Chrome中播放的活動Media元素將暫停並接收「已暫停」的媒體事件。若是按下播放鍵，前一個被暫停的media元素將被再次恢復並接收一個‘play’媒體事件。不管Chrome應用是在前臺仍是在後臺，它都有效。

在Chrome操做系統中，使用音頻焦點的Android應用如今會通知Chrome暫停和恢復音頻，以便在Chrome，Chrome應用和Android應用上的網站之間建立無縫的媒體體驗。

簡而言之，老是監聽這些媒體事件並採起相應行動是一種很好的作法。

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.
});
複製代碼

不光上面，如今桌面上可使用媒體會話API（之前只在移動設備上支持），Web開發人員能夠處理媒體相關事件，例如由媒體鍵觸發的曲目更改。目前支持事件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.
});
複製代碼

目前僅在Chrome OS，macOS和Windows上支持，Linux將在稍後推出。

使用媒體會話API設置一些媒體會話元數據（如標題，藝術家，專輯名稱和插圖）可用，但還沒有鏈接到桌面通知。它將在之後的支持平臺上出現。

查看目前已有開發者文檔並嘗試官方Media Session示例

2、加密媒體：HDCP政策檢查

因爲HDCP策略檢查API，Web開發人員如今能夠查詢特定策略，例如，在請求Widevine許可和加載媒體以前，能夠強制執行HDCP要求。

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。

3、已安裝的PWA的自動畫中畫原點試驗

有些頁面可能但願自動進入和離開畫中畫的視頻元素;例如，當用戶在Web應用程序與其餘應用tab之間來回切換時，視頻Web應用程序將受益於一些自動畫中畫行爲。但很遺憾，用戶手勢目前是作不到的，因此這就是Auto Picture-in-Picture！

爲了支持這些tab和app互相切換，video元素添加了一個新的autopictureinpicture屬性。

<video autopictureinpicture></video>
複製代碼

如下是工做原理：

當document隱藏時，最近設置了autopictureinpicture屬性的video元素就會自動進入Picture-in-Picture(若是容許畫中畫的話)

當document可見時，畫中畫中的視頻元素會自動離開。

請注意，「自動畫中畫」功能僅適用於用戶在桌面上安裝的Progressive Web Apps（PWA）。

查看更多細節和嘗試官方PWA示例

爲了從Web開發人員那裏得到反饋，自動畫中畫功能可做爲適用於桌面（Chrome OS，Linux，Mac和Windows）的Chrome 73中的Origin Trial。您須要請求令牌，以便在有限的時間段內爲您的源自動啓用該功能。這將消除啓用「Web平臺功能」標誌的須要。

4、在畫中畫窗口中跳過廣告的原始試驗

視頻廣告模型一般包括前貼片廣告。內容提供商一般會在幾秒鐘後跳過廣告。遺憾的是，因爲畫中畫窗口不是交互式的，所以觀看畫中畫視頻的用戶今天沒法作到這一點。

如今桌面上可使用媒體會話API（以前僅在移動設備上支持），可使用新的跳過媒體會話操做在畫中畫中提供此選項。

畫中畫窗口跳過廣告按鈕

要提供此功能，請在調用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.
}
複製代碼

媒體會話操做處理程序將保持不變。我建議在媒體播放開始和結束時始終重置它們以免顯示意外的「跳過廣告」按鈕。

5、爲PWA授予自動播放權限

如今全部桌面平臺均可以使用Progressive Web Apps（PWA），咱們正在將移動設備上的規則擴展到桌面：如今容許已安裝的PWA使用聲音自動播放。請注意，它僅適用於Web應用程序清單範圍內的頁面。