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

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

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

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

1、Media鍵盤按鍵支持

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

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

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

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

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和nexttracksession

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

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

Chrome會自動處理播放和暫停鍵。可是,若是默認行爲不適合您,您能夠爲「播放」和「暫停」設置一些操做處理程序以防止這種狀況發生。app

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

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

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

使用媒體會話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應用程序清單範圍內的頁面。

相關文章
相關標籤/搜索