画中画模式现在已经很常见了，比如：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>

效果：

原生API实现视频画中画模式_html