picture-in-picture

官方API文档

1.兼容性

2.通常的打开方式

画中画播放器可以拖拽、自己控制播放器宽高

浏览器中切换到其他页面画中画还会一直固定在原来位置，继续播放

3.两个方法

1.进入画中画模式：video.requestPictureInPicture()

2.退出退出画中画模式：document.exitPictureInPicture()

<div class="videoWrapper">
    <video controls autoplay id="video" src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"></video>
    <div>
        <button id="enter">进入画中画</button>
        <button id="exit">退出画中画</button>
        <span id="tips"></span>
    </div>
</div>

const video = document.getElementById('video');
const enter = document.getElementById('enter');
const exit = document.getElementById('exit');
const tips = document.getElementById('tips');

// 进入画中画
enter.addEventListener('click', (event) => {
    video.requestPictureInPicture().catch(error => {
        console.log(error);
    });
});

// 退出画中画
exit.addEventListener('click', (event) => {
    document.exitPictureInPicture().catch(error => {
        console.log(error);
    });
});

可实现通过点击按钮进入/退出画中画

4.两个事件

用于监听视频播放状态

1.进入画中画模式时候执行：enterpictureinpicture

2.退出画中画模式时候执行：leavepictureinpicture

// 事件监听
video.addEventListener('enterpictureinpicture', (event) => {
    tips.textContent = '已进入画中画模式';
});
video.addEventListener('leavepictureinpicture', () => {
    tips.textContent = '已退出画中画模式';
});

5.PictureInPictureWindow对象

即画中画对象，包含3个属性，width、height、onresize.
width、height表示小窗口现在的高度和宽度,onresize属性值是个Function，可以监听小窗口尺寸的改变。

//画中画监听
video.addEventListener('enterpictureinpicture', (event) => {
    var pipWindow = event.pictureInPictureWindow;
    console.log("TCL: pipWindow", pipWindow);
    
    // 我们可以绑定resize事件
    //用户改变画中画大小时触发
    pipWindow.addEventListener('resize', (e) => {
        console.log(`画中画窗口大小：${pipWindow.width} * ${pipWindow.height}`);
    });
});

输出pipWindow对象

拖拽放大画中画播放器宽高时输出

6.禁用画中画属性

disablePictureInPicture

<video disablePictureInPicture controls autoplay id="video" src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"></video>

已无画中画选项