一、下面播報(bào)一則新聞

Chrome 70已經(jīng)原生支持HTML5 <video>播放時(shí)候Picture-in-Picture，也就是俗稱的畫中畫技術(shù)，也就是很多視頻網(wǎng)站看評(píng)論時(shí)候，播放視頻變小掛在右下角的這種交互技術(shù)。

我一瞅自己的Chrome瀏覽器，正好就是Chrome 70，體驗(yàn)了一番，挺有意思的，值得介紹下，以后估計(jì)用得著。

二、先看畫中畫實(shí)例demo

點(diǎn)擊頁面的切換按鈕，或者右鍵視頻→畫中畫，都可以進(jìn)入視頻畫中畫模式：

在頁面右下角可以看到一個(gè)小視頻，尺寸小小的視頻：

實(shí)際上，此時(shí)的這個(gè)小視頻是個(gè)脫離于瀏覽器定位的，頂級(jí)的播放窗口，我們把瀏覽器最小化，此視頻依然會(huì)在右下角播放，就像騰訊視頻客戶端播放器的精簡(jiǎn)模式一樣：

于是，我們可以一邊碼代碼，一邊看網(wǎng)頁視頻了。

三、畫中畫幾個(gè)API簡(jiǎn)介

畫中畫看上去很酷，總感覺API也會(huì)很復(fù)雜，實(shí)際上，除了名稱長(zhǎng)了點(diǎn)，超簡(jiǎn)單的。

假設(shè)變量video就是我們的<video>視頻元素，則，進(jìn)入畫中畫模式，直接一句：

// 進(jìn)入畫中畫 video.requestPictureInPicture(); web前端開發(fā)學(xué)習(xí)Q-q-u-n： 767273102 ，分享開發(fā)工具，零基礎(chǔ)，進(jìn)階視頻教程，希望新手少走彎路

退出畫中畫模式，也是一句：

// 退出畫中畫 document.exitPictureInPicture();

為了方便我們監(jiān)聽視頻的播放狀態(tài)，還提供了2個(gè)事件API接口，如下：

// 進(jìn)入畫中畫模式時(shí)候執(zhí)行 video.addEventListener('enterpictureinpicture', function() {// 已進(jìn)入畫中畫模式 }); // 退出畫中畫模式時(shí)候執(zhí)行 video.addEventListener('leavepictureinpicture', function() {// 已退出畫中畫模式 });

最后，還提供了一個(gè)PictureInPictureWindow對(duì)象，也就是畫中畫窗口對(duì)象，包含width，height和onresize這些屬性，示意如下：

{height: 192,onresize: null,width: 341 }

width，height表示小窗口現(xiàn)在的高度和寬度，onresize屬性值是個(gè)Function，可以監(jiān)聽小窗口尺寸的改變。PictureInPictureWindow對(duì)象的獲取在畫中畫響應(yīng)事件的event對(duì)象中，例如：

video.addEventListener('enterpictureinpicture', function(event) {var pipWindow = event.pictureInPictureWindow;// pipWindow就是一個(gè)PictureInPictureWindow對(duì)象// 我們可以綁定resize事件pipWindow.addEventListener('resize', function () {// pipWindow.width就是小視頻窗口的寬度// pipWindow.height就是小視頻窗口的高度}); }); web前端開發(fā)學(xué)習(xí)Q-q-u-n： 767273102 ，分享開發(fā)工具，零基礎(chǔ)，進(jìn)階視頻教程，希望新手少走彎路

以上，基本上就是HTML video Picture-in-Picture畫中畫技術(shù)全部API了，兩個(gè)方法（進(jìn)入和退出），兩個(gè)事件（進(jìn)入和退出）以及一個(gè)對(duì)象（畫中畫窗體對(duì)象）。

這點(diǎn)程度的學(xué)習(xí)相信大家一定都毫無壓力。

四、最后再說點(diǎn)啥

當(dāng)視頻進(jìn)入畫中畫模式的時(shí)候，瀏覽器的標(biāo)簽頁上會(huì)出現(xiàn)一個(gè)方框框小標(biāo)志，同時(shí)title提示也會(huì)發(fā)生變化

當(dāng)進(jìn)入畫中畫模式的時(shí)候，原視頻會(huì)停止播放、置灰，并提示已進(jìn)入畫中畫模式：

總結(jié)

以上是生活随笔為你收集整理的HTML5 video视频播放的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。