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

SuperJolly發表於2019-03-31
ChromeIDE

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

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

  • 現在支援通過媒體按鍵來控制桌面上的媒體播放。
  • Web開發人員可以查詢是否可以實施某個HDCP策略。
  • 桌面PWA應用自動畫中畫，畫中畫中的“跳過廣告”正在試驗階段。
  • 桌面PWA允許自動播放聲音

一、Media鍵盤按鍵支援

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

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

如果使用者按下了暫停鍵，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示例

二、加密媒體：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。

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

有些頁面可能希望自動進入和離開畫中畫的視訊元素;例如，當使用者在Web應用程式與其他應用tab之間來回切換時，視訊Web應用程式將受益於一些自動畫中畫行為。但很遺憾，使用者手勢目前是做不到的，所以這就是Auto Picture-in-Picture！

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

為了支援這些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平臺功能”標誌的需要。

四、在畫中畫視窗中跳過廣告的原始試驗

視訊廣告模型通常包括前貼片廣告。內容提供商通常會在幾秒鐘後跳過廣告。遺憾的是，由於畫中畫視窗不是互動式的，因此觀看畫中畫視訊的使用者今天無法做到這一點。

現在桌面上可以使用媒體會話API（之前僅在移動裝置上支援），可以使用新的跳過媒體會話操作在畫中畫中提供此選項。

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

畫中畫視窗跳過廣告按鈕

要提供此功能，請在呼叫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.
}
複製程式碼

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

五、為PWA授予自動播放許可權

現在所有桌面平臺都可以使用Progressive Web Apps（PWA），我們正在將移動裝置上的規則擴充套件到桌面：現在允許已安裝的PWA使用聲音自動播放。請注意，它僅適用於Web應用程式清單範圍內的頁面。

相關文章