概述
畫中畫功能是chrome70+的新功能，視訊視窗能夠從浏覽器獨立出來播放視訊，看起來像是一個本地應用。
添加畫中畫功能
//document.pictureInPictureElement 擷取畫中畫元素
//document.pictureInPictureEnabled 判斷是否支援畫中畫
/*
<video
controls
controlslist="nodownload" //禁用下載下傳
class="video-player"
disablePictureInPicture // 禁用畫中畫
oncontextmenu = "return false" //禁用滑鼠右鍵
></video>
controlslist:取值如下,設定多個空格間隔
nodownload:取消更多控件彈窗的下載下傳功能;
nofullscreen:取消全屏功能;
noremoteplayback:取消遠端播放視訊
*/
var video = document.createElement("VIDEO");
var togglebtn = document.getElementById('btn');
//添加畫中畫功能開啟關閉事件
togglebtn.addEventListener('click', function() {
if (!document.pictureInPictureElement) {//開啟
video.requestPictureInPicture().catch(error => {
console.log(error,'Video failed to enter Picture-in-Picture mode.');
});
} else {//關閉
document.exitPictureInPicture().catch(error => {
console.log(error,'Video failed to leave Picture-in-Picture mode.');
});
}
});
//video元素添加事件
video.addEventListener('enterpictureinpicture', function(event) {
console.log('Video entered Picture-in-Picture mode.');
});
//video元素添加事件
video.addEventListener('leavepictureinpicture', function(e) {
console.log('Video left Picture-in-Picture mode.');
});
參考資料
官方文檔
官方demo
一、下面播報一則新聞
Chrome 70已經原生支援 HTML 5
<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提示也會發生變化，如下截圖：
當進入畫中畫模式的時候，原視訊會停止播放、置灰，并提示已進入畫中畫模式：
如果對完整的互動實作感興趣，可以參見demo頁面底部的JS源代碼。
其他資源：
- API規範文檔： Picture-in-Picture Web API
- 相容性： https://caniuse.com/#search=picture-in-picture
————————————————
版權聲明：本文為CSDN部落客「萬少博」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。
轉載于：https://blog.csdn.net/wanshaobo888/article/details/86308370
https://www.codercto.com/a/42629.html