视频画中画PictureInPicture实现

所属分类:播放器相关

 300次|    0次   点击收藏(0)

视频画中画PictureInPicture实现

hi,大家好,本文案例主要介绍视频画中画。


关键API

原型链方法

所有HTMLVideoElement类的实例对象都继承了父类原型链上关于画中画的方法,以下方法是父类原型链上拥有的方法。

  • HTMLVideoElement.prototype.disablePictureInPicture
  • HTMLVideoElement.prototype.requestPictureInPicture

检测支持

通过检测document.pictureInPictureEnabled是否为真判断当前浏览器是否支持画中画,document对象中还有一个属性document.pictureInPictureElement,该属性指向当前激活了画中画特性的元素。

事件

通过为实例化DOM元素对象的三个事件监听器赋值事件监听函数:

videoElement.onenterpictureinpicture = function(e){
  // e.target 指向当前DOM元素
}
videoElement.onleavepictureinpicture = function(e){
  // e.target 指向当前DOM元素
} 复制代码

其中,onenterpictureinpicture事件监听函数触发后,传入事件监听函数内的事件对象内包含pictureInPictureWindow属性,该属性指向悬浮的画中画窗口对象,该画中画窗口对象包含一些有关画中画窗口的属性和一个监听画中画窗口缩放的事件监听函数

pictureInPictureWindow {
  width,
  height,
  onresize
} 复制代码

onresize赋值函数,可以用来处理当用户缩放画中画窗口时的操作。

0 条评论
不想登录?直接点击发布即可作为游客留言。
关于前端资源库

前端资源库是haorooms博主平时积累的前端资源,大部分来源于互联网。但经过博主调试和加工,集聚了博主的心血。

因此,资源库所有资源,仅供学习和参考,切勿下载下来用于商业用途或者转卖。转载请注明来自haorooms博客资源库!

联系方式
关键词搜索