一、下面播報一則新聞
Chrome 70已經原生支持HTML5 <video>播放時候Picture-in-Picture，也就是俗稱的畫中畫技術，也就是很多視頻網站看評論時候，播放視頻變小掛在右下角的這種交互技術。
我一瞅自己的Chrome瀏覽器，正好就是Chrome 70，體驗了一番，挺有意思的，值得介紹下，以後估計用得着。
二、先看畫中畫實例demo
請確保您的瀏覽器支持畫中畫，然後可以狠狠地點擊這裏：Video視頻畫中畫效果demo
點擊頁面的切換按鈕，或者右鍵視頻→畫中畫，都可以進入視頻畫中畫模式：
點擊按鈕示意
右鍵視頻 畫中畫示意
在頁面右下角可以看到一個小視頻，尺寸小小的視頻：
瀏覽器右下角有視頻播放界面
實際上，此時的這個小視頻是個脫離於瀏覽器定位的，頂級的播放窗口，我們把瀏覽器最小化，此視頻依然會在右下角播放，就像騰訊視頻客戶端播放器的精簡模式一樣：
顯示在桌面窗體上
於是，我們可以一邊碼代碼，一邊看網頁視頻了。
三、畫中畫幾個API簡介
畫中畫看上去很酷，總感覺API也會很複雜，實際上，除了名稱長了點，超簡單的。
假設變量video就是我們的<video>視頻元素，則，進入畫中畫模式，直接一句：
// 進入畫中畫
video.requestPictureInPicture();
退出畫中畫模式，也是一句：
// 退出畫中畫
document.exitPictureInPicture();
爲了方便我們監聽視頻的播放狀態，還提供了2個事件API接口，如下：
// 進入畫中畫模式時候執行
video.addEventListener('enterpictureinpicture', function() {
// 已進入畫中畫模式
});
// 退出畫中畫模式時候執行
video.addEventListener('leavepictureinpicture', function() {
// 已退出畫中畫模式
});
最後，還提供了一個PictureInPictureWindow對象，也就是畫中畫窗口對象，包含width，height和onresize這些屬性，示意如下：
{
height: 192,
onresize: null,
width: 341
}
width，height表示小窗口現在的高度和寬度，onresize屬性值是個Function，可以監聽小窗口尺寸的改變。PictureInPictureWindow對象的獲取在畫中畫響應事件的event對象中，例如：
video.addEventListener('enterpictureinpicture', function(event) {
var pipWindow = event.pictureInPictureWindow;
// pipWindow就是一個PictureInPictureWindow對象
// 我們可以綁定resize事件
pipWindow.addEventListener('resize', function () {
// pipWindow.width就是小視頻窗口的寬度
// pipWindow.height就是小視頻窗口的高度
});
});
以上，基本上就是HTML video Picture-in-Picture畫中畫技術全部API了，兩個方法（進入和退出），兩個事件（進入和退出）以及一個對象（畫中畫窗體對象）。
這點程度的學習相信大家一定都毫無壓力。
四、最後再說點啥
當視頻進入畫中畫模式的時候，瀏覽器的標籤頁上會出現一個方框框小標誌，同時title提示也會發生變化，如下截圖：
畫中畫模式下的標籤頁選項卡
當進入畫中畫模式的時候，原視頻會停止播放、置灰，並提示已進入畫中畫模式：
畫中畫時候原視頻UI
如果對完整的交互實現感興趣，可以參見demo頁面底部的JS源代碼。
其他資源：