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

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>

4.video视频播放的其他api

视频播放:video.paly()
视频暂停:video.pause()
返回播放位置:video.currentTime
返回视频总长度:video.duration
返回当前音量:video.volume
返回视频就绪状态:video.readyState

  1. //0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
  2. //1 = HAVE_METADATA - 关于音频/视频就绪的元数据
  3. //2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的,但没有足够的数据来播放下一帧/毫秒
  4. //3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
  5. //4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放