html5视频标签video画中画几个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了,两个方法(进入和退出),两个事件(进入和退出)以及一个对象(画中画窗体对象)。
这点程度的学习相信大家一定都毫无压力。
————————————————
链接:https://blog.csdn.net/llll789789/article/details/97823047
标签:画中画,height,width,pipWindow,API,video 来源: https://blog.csdn.net/ffffffff8/article/details/115109037