经常看视频的朋友可能会遇到视频“画中画”的效果，例如你在看优酷的电视剧，向下滚动看推荐视频或者评论等信息的时候，发现上面的播放视频被屏幕上滚之后遮盖了，右下方出现了一个小视频播放器，这就叫画中画效果。针对这个效果，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="http://vjs.zencdn.net/v/oceans.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

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