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>
閱讀更多 蟲蟲安全 的文章
