html5视频标签video画中画几个API-白红宇

html5视频标签video画中画几个API

阅读量：2719 次

发布时间：2019-05-13

本文共 1113 字，大约阅读时间需要 3 分钟。

画中画看上去很酷，总感觉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了，两个方法（进入和退出），两个事件（进入和退出）以及一个对象（画中画窗体对象）。

这点程度的学习相信大家一定都毫无压力。

————————————————

链接：https://blog.csdn.net/llll789789/article/details/97823047

你可能感兴趣的文章