Picture-in-Picture畫中畫功能首次亮相是在2016年的macOS發佈會上。該功能可以使用戶彈出一個小浮動的視頻播放器窗口,該窗口位於所有其他窗口之上,可以讓用戶在做其他事情的同時繼續觀看視頻,就像看電視一樣,在網上瀏覽時候時,繼續收看視頻不耽擱。
安卓在8.0發佈中也包括了通過本機API的畫中畫支持。即使適用於安卓的Chrome瀏覽器,可以通過此API以畫中畫模式播放視頻。
W3C起草了針對畫中畫Web API標準,使網站可以啟動和控制此行為。
至今,谷歌Chrome(版本70+)和微軟Edge(版本76+)已經支持此標準。而 Firefox,Safari和Opera均使用自有的API來實現。目前各大瀏覽器對畫中畫功能的支持見下圖(圖中數字表示瀏覽器版本):
使用畫中畫API
畫中畫功能使用非常簡單,使用video標籤添加一個畫中畫視頻到頁面:
<video>
在Chrome瀏覽器中,直接支持該功能,打開頁面後,就有一個進入和退出畫中畫模式的開關。
Firefox瀏覽器則需要啟動配置,打開Firefox配置頁面about:config,啟用media.videocontrols.picture-in-picture.enabled標誌,
然後在窗口右邊就能看到畫中畫按鈕。
我們可以使用畫中畫Web API用我們自己的方法替換在瀏覽器中進入畫中畫模式的默認方法。
例如,讓我們添加一個按鈕,單擊該按鈕即可啟用它:
<button>啟用畫中畫模式/<button>
然後通過JavaScript中選擇視頻和按鈕:
const video = document.getElementById('video');
const pipButton = document.getElementById('pipButton');
默認情況下,該按鈕是隱藏和禁用的,因為在顯示按鈕之前,需要知道用戶的瀏覽器是否支持並啟用了畫中畫API。這是一種逐步增強的形式,有助於避免在不支持該功能的瀏覽器中出現不良的體驗。
檢查API是否受支持,並啟用按鈕,腳本如下:
if ('pictureInPictureEnabled' in document) {
pipButton.classList.remove('hidden')
pipButton.disabled = false;
}
進入畫中畫模式
假設JavaScript確定瀏覽器已啟用畫中畫支持。當單擊帶有#pipButton的按鈕時,讓我們在視頻元素上調用requestPictureInPicture()。該方法返回的一個斷言,在解析後默認情況下會將視頻放置在屏幕右下角的小窗口中,用戶可以用鼠標任意拖動它的位置。
if ('pictureInPictureEnabled' in document) {
pipButton.classList.remove('hidden')
pipButton.disabled = false;
pipButton.addEventListener('click', () => {
video.requestPictureInPicture();
});
}
由於requestPictureInPicture()方法返回一個斷言,如果尚未加載視頻元數據或視頻上存在disablePictureInPicture屬性,則可能會拒絕該斷言。
我們添加一個catch塊來捕獲此潛在錯誤,並讓用戶知道發生了什麼:
pipButton.addEventListener('click', () => {
video
.requestPictureInPicture()
.catch(error => {
// Error handling
});
});
退出畫中畫模式
瀏覽器會畫中畫窗口上提供一個關閉按鈕,使單擊時可以關閉該窗口。我們也可以通過自己寫代碼退出畫中畫模式的方法。例如,可以單擊#pipButton關閉任何活動的畫中畫窗口。
pipButton.addEventListener('click', () => {
if (document.pictureInPictureElement) {
document
.exitPictureInPicture()
.catch(error => {
})
} else {
}
});
當視頻進入全屏模式時,要關閉畫中畫窗口的。Chrome會自動執行此操作,而無需執行編寫任何代碼。
畫中畫模式下的行為
瀏覽器使能夠檢測視頻何時進入畫中畫模式或離開畫中畫模式。由於可以進入或退出畫中畫模式,因此可以依靠事件檢測來更新媒體控件。
這些事件分別為enterpictureinpicture 和 leavepictureinpicture,這兩個事件的名稱分別在視頻進入或退出畫中畫模式時觸發。
下面示例中,我們需要根據視頻當前是否處於畫中畫模式來更新#pipButton標籤:
video.addEventListener('enterpictureinpicture', () => {
pipButton.textContent = 'Exit Picture-in-Picture mode';
});
video.addEventListener('leavepictureinpicture', () => {
pipButton.textContent = 'Enter Picture-in-Picture mode';
});
自定義畫中畫窗口
默認情況下,瀏覽器在畫中畫窗口中顯示"播放/暫停"按鈕,除非視頻正在播放MediaStream對象(由虛擬視頻源(如相機,視頻記錄設備,屏幕共享服務或其他硬件)產生)來源)。
我們可以自添加直接從畫中畫窗口轉到上一個或下一個的控件:
navigator.mediaSession.setActionHandler('previoustrack', () => {
});
navigator.mediaSession.setActionHandler('nexttrack', () => {
});
以網絡攝像頭為視頻來源
當用戶在應用程序和其他瀏覽器選項卡或窗口之間來回切換時,將視頻會議Web應用程序設置為畫中畫模式可受益於此。
禁用畫中畫
如果不希望視頻在畫中畫窗口中彈出,則可以向其添加
disablePictureInPicture屬性,如下所示:
<video>
總結
本文我們介紹了畫中畫Web接口的常見功能。目前,API僅支持在<video>標籤下使用,預計將來可以擴展到其他元素。畫中畫功能是一個很有用的功能,可以有效的改善用戶體驗,蟲蟲已經在很多網站上見到過該功能,希望大家使用他來增強自己網站上的視頻體驗。/<video>
閱讀更多 蟲蟲安全 的文章