原生js提供的视频画中画api

七娃博客 2020-07-21 1,192人阅读

经常看视频的朋友可能会遇到视频“画中画”的效果，例如你在看优酷的电视剧，向下滚动看推荐视频或者评论等信息的时候，发现上面的播放视频被屏幕上滚之后遮盖了，右下方出现了一个小视频播放器，这就叫画中画效果。针对这个效果，js有一个专门的api可以调用，当我们自定义画中画按钮时，就可以实现点击触发视频画中画的效果。

原生js提供的视频画中画api-QUI-Notes

1.画中画API

Api1：requestPictureInPicture() 进入画中画，在需要的时候直接调用就行例如：video.requestPictureInPicture()，指定视频盒子开启画中画。
Api2：exitPictureInPicture() 退出画中画，在需要的时候直接调用就行例如：document.exitPictureInPicture()，浏览器关闭画中画功能。

2.画中画监听

当然，有的人还想监听是否进入画中画了，官方也提供了对应的api，方便我们实现不同的效果，下面是监听画中画进入/退出的代码：

video.addEventListener('enterpictureinpicture', function() {
 console.log("已经进入画中画")
});
video.addEventListener('leavepictureinpicture', function() {
 console.log("已退出画中画模式")
});

3.实际案例

<video id="video_paly" width="600" height="400" controls src="https://v-cdn.zjol.com.cn/280443.mp4" preload poster="https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg">
 您的浏览器不支持 video 标签。
</video>	
		
<button id="button1">进入画中画</button>
<button id="button2">退出画中画</button>
<script type="text/javascript">
var video = document.getElementById("video_paly");
var btn1 = document.getElementById("button1");
var btn2 = document.getElementById("button2");
btn1.onclick = function(){
	video.requestPictureInPicture();
}
btn2.onclick = function(){
	document.exitPictureInPicture();
}		
video.addEventListener('enterpictureinpicture', function() {
	 console.log("已经进入画中画")
});
video.addEventListener('leavepictureinpicture', function() {
	console.log("已退出画中画模式")
});
</script>