概述
畫中畫功能是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.');
});
參考資料
一、下面播報一則新聞
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源代碼。
其他資源:
————————————————
版權聲明:本文爲CSDN博主「萬少博」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。
轉載於:https://blog.csdn.net/wanshaobo888/article/details/86308370