HTML5 video視訊播放Picture-in-Picture畫中畫技術
byzhangxinxu from ofollow,noindex" target="_blank">https://www.zhangxinxu.com/wordpress/?p=8242
本文可全文轉載,個人網站無需授權,只要保留原作者、出處以及文中連結即可,任何網站均可摘要聚合,商用請聯絡授權。
一、下面播報一則新聞
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提示也會發生變化,如下截圖:
當進入畫中畫模式的時候,原視訊會停止播放、置灰,並提示已進入畫中畫模式:
如果對完整的互動實現感興趣,可以參見demo頁面底部的JS原始碼。
其他資源:
以上~
感謝閱讀,歡迎交流!
本文為原創文章,會經常更新知識點以及修正一些錯誤,因此轉載請保留原出處,方便溯源,避免陳舊錯誤知識的誤導,同時有更好的閱讀體驗。
本文地址: https://www.zhangxinxu.com/wordpress/?p=8242
(本篇完)