画中画模式现在已经很常见了，比如：bilibili…，今天我们用原生的API来实现一个画中画。
代码如下所示，配备注释…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小窗播放</title>
</head>
<body>
<video id="video" src="资源地址" style="width: 800px;height: 500px;" controls></video>
<button id="btn">进入画中画模式</button>
<script>
//获取元素
var btn=document.querySelector('#btn');
var video=document.querySelector('#video');
//获得浮动视频窗口的宽度和高度，并调整浮动视频窗口的大小。
function printPipWindowDimensions(event){
console.log(event.target);
}
function leave(){
console.log("离开");
}
function enter(){
console.log("进入");
}
//进入画中画触发
video.addEventListener('enterpictureinpicture', enter);
//离开画中画触发
video.addEventListener('leavepictureinpicture', leave);
//主函数
async function go(){
try{
//判断是否在画中画中
if(video!==document.pictureInPictureElement){
//开启画中画
await video.requestPictureInPicture()
//进入画中画后操作
video.requestPictureInPicture().then(PictureInPictureWindow=>{
//尺寸大小
PictureInPictureWindow.onresize=printPipWindowDimensions;
//修改按钮文本
btn.innerHTML="退出画中画模式"
});
}else{
//退出画中画模式
await document.exitPictureInPicture();
btn.innerHTML="进入画中画模式"
}
}
//异常时触发
catch(err){
alert(err);
}finally{
//始终执行
console.log("finally called");
}
}
//添加事件
btn.addEventListener('click',go);
</script>
</body>
</html>
效果：
