原文地址:developers.google.com/web/updates…html
在本文中,我將討論Chrome 73新媒體功能,其中包括git
許多鍵盤現在已有按鍵能夠控制基礎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示例
因爲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。
有些頁面可能但願自動進入和離開畫中畫的視頻元素;例如,當用戶在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)。
爲了從Web開發人員那裏得到反饋,自動畫中畫功能可做爲適用於桌面(Chrome OS,Linux,Mac和Windows)的Chrome 73中的Origin Trial。您須要請求令牌,以便在有限的時間段內爲您的源自動啓用該功能。這將消除啓用「Web平臺功能」標誌的須要。
視頻廣告模型一般包括前貼片廣告。內容提供商一般會在幾秒鐘後跳過廣告。遺憾的是,因爲畫中畫窗口不是交互式的,所以觀看畫中畫視頻的用戶今天沒法作到這一點。
如今桌面上可使用媒體會話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.
}
複製代碼
媒體會話操做處理程序將保持不變。我建議在媒體播放開始和結束時始終重置它們以免顯示意外的「跳過廣告」按鈕。
如今全部桌面平臺均可以使用Progressive Web Apps(PWA),咱們正在將移動設備上的規則擴展到桌面:如今容許已安裝的PWA使用聲音自動播放。請注意,它僅適用於Web應用程序清單範圍內的頁面。