HTML5 video视频播放Picture-in-Picture画中画技术

川长思鸟来 2021-06-26 16:06 528阅读 0赞

## 一、下面播报一则新闻 ##

`Chrome 70`已经原生支持HTML5 `<video>`播放时候`Picture-in-Picture`，也就是俗称的画中画技术，也就是很多视频网站看评论时候，播放视频变小挂在右下角的这种交互技术。  
![画中画视频播放兼容性][2020042816310339.png]  
我一瞅自己的`Chrome`浏览器，正好就是`Chrome 70`，体验了一番，挺有意思的，值得介绍下，以后估计用得着。

## 二、先看画中画实例demo ##

请确保您的浏览器支持画中画，然后可以狠狠地点击这里：[Video视频画中画效果demo][Video_demo]

点击页面的切换按钮，或者右键视频→画中画，都可以进入视频画中画模式：  
![在这里插入图片描述][20200428163242726.png]  
点击按钮示意  
![在这里插入图片描述][20200428163300604.png]  
右键视频 画中画示意

在页面右下角可以看到一个小视频，尺寸小小的视频：  
![在这里插入图片描述][20200428163331349.png]  
浏览器右下角有视频播放界面

实际上，此时的这个小视频是个脱离于浏览器定位的，顶级的播放窗口，我们把浏览器最小化，此视频依然会在右下角播放，就像腾讯视频客户端播放器的精简模式一样：  
![在这里插入图片描述][20200428163356826.png]  
显示在桌面窗体上

于是，我们可以一边码代码，一边看网页视频了。

## 三、画中画几个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`提示也会发生变化，如下截图：  
![在这里插入图片描述][20200428163719717.png]  
画中画模式下的标签页选项卡

当进入画中画模式的时候，原视频会停止播放、置灰，并提示已进入画中画模式：  
![在这里插入图片描述][20200428163737250.png]  
画中画时候原视频UI

如果对完整的交互实现感兴趣，可以参见`demo`页面底部的JS源代码。

其他资源：

*  API规范文档：[Picture-in-Picture Web API][]
 *  兼容性：[https://caniuse.com/\#search=picture-in-picture][https_caniuse.com_search_picture-in-picture]

[2020042816310339.png]: /images/20210626/13071469d70c402480c3a6184c09de19.png
[Video_demo]: https://www.zhangxinxu.com/study/201812/video-picture-in-picture-demo.php
[20200428163242726.png]: /images/20210626/120beb1e27614482bdcee7160e45a3b6.png
[20200428163300604.png]: /images/20210626/673cbe6cc9bc4a0db3a158351ceae6ed.png
[20200428163331349.png]: /images/20210626/aed88db43fad42f491adb2439cbd9841.png
[20200428163356826.png]: /images/20210626/6995476ef3534ef5821b28fe05884523.png
[20200428163719717.png]: /images/20210626/a9f70cf707c141a694883cc3f6b88c6c.png
[20200428163737250.png]: /images/20210626/a7a200ed4f9747df843990dafcddb3b8.png
[Picture-in-Picture Web API]: https://w3c.github.io/picture-in-picture/
[https_caniuse.com_search_picture-in-picture]: https://caniuse.com/#search=picture-in-picture