# 视频画中画Web API粗略

> 视频画中画，用户在浏览web页面信息时，可将视频弹出到一个悬浮可随意拖放的一个顶层小窗口，可继续阅读页面其他信息或进行其他操作。

Author: DeathGhost
Published: 2019-11-28 00:54:25
Category: javascript
Canonical: https://www.deathghost.cn/article/javascript/59
Keywords: 画中画, 视频, 视频画中画, 进入画中画模式, 退出画中画, 禁用画中画, picture-in-picture, 悬浮视频, 视频窗口, 视频悬浮

Web视频页面中，我们常常会在用户可操作区域看到“画中画”功能操作，点击进入画中画模式后，视频会被置顶默认于屏幕右下角位置，便于我们进行其他阅读或操作（例如：优酷视频中等等相关视频站点）。

![视频画中画Web API粗略](https://www.deathghost.cn/public/upload/article/2019/12/15/1576343289760327.jpg)

视频画中画Web API粗略

我们可以通过画中画Web API 中提供的一些方法去修改画中画模式的默认方法。例如，我们可以在页面中添加按钮，触发进入画中画模式与退出画中画默认一般。

<video src="20190116_084805.mp4" controls id="video"></video>
<button id="enter">进入画中画</button>
<button id="exit">退出画中画</button>
默认情况下，我们在视频元素中右键菜单项中含有&ldquo;画中画&rdquo;选项，点击即可进入画中画模式，关闭或返回标签页将退出画中画模式。

这是默认操作。

那么如果我们需要通过JavaScript进行操作，又该如何呢？

## 进入与退出画中画模式

video.requestPictureInPicture()
document.exitPictureInPicture()
字面意思我们可以看出为进入画中画与退出画中画模式操作。

所以，实际运用中，我们就可以定义事件对其操作。如同：

// 进入画中画
enter.addEventListener('click', () => {
    video.requestPictureInPicture().catch(error => {
        console.log(error);
    });
});
// 退出画中画
exit.addEventListener('click', () => {
    document.exitPictureInPicture().catch(error => {
        console.log(error);
    });
});
添加catch捕获潜在错误，如：已退出画中画模式，若再次点击，控制台则出错。

## 画中画活动状态

我们可以通过enterpictureinpicture与leavepictureinpicture事件检测视频何时进入或退出画中画模式。

下面我们给其添加一个文本提示

// 事件检测 进入/退出
video.addEventListener('enterpictureinpicture', () => {
    tips.textContent = '已进入画中画模式';
});
video.addEventListener('leavepictureinpicture', () => {
    tips.textContent = '已退出画中画模式';
});
同时，我们可以返回其画中画的尺寸

video.addEventListener('enterpictureinpicture', (event) => {
    console.log(`画中画窗口大小：${event.pictureInPictureWindow.width} * ${event.pictureInPictureWindow.height}`);
});

## 禁用视频中的画中画

如果不希望视频弹出于画中画，禁止右键菜单中的画中画，那么，我们可以在视频元素中添加disablePictureInPicture属性即可。

<video disablePictureInPicture src="20190116_084805.mp4" controls id="video"></video>
完整demo内容，具体可以添加一个本地小视频测试。

<video disablePictureInPicture src="20190116_084805.mp4" controls id="video"></video>
<button id="enter">进入画中画</button>
<button id="exit">退出画中画</button>
<span id="tips"></span>
<script>
    const video = document.getElementById('video');
    const enter = document.getElementById('enter');
    const exit = document.getElementById('exit');
    const tips = document.getElementById('tips');
    // 进入画中画
    enter.addEventListener('click', () => {
        video.requestPictureInPicture().catch(error => {
            console.log(error);
        });
    });
    // 退出画中画
    exit.addEventListener('click', () => {
        document.exitPictureInPicture().catch(error => {
            console.log(error);
        });
    });
    // 事件检测 进入/退出
    video.addEventListener('enterpictureinpicture', (event) => {
        console.log(`画中画窗口大小：${event.pictureInPictureWindow.width} * ${event.pictureInPictureWindow.height}`);
        tips.textContent = '已进入画中画模式';
    });
    video.addEventListener('leavepictureinpicture', () => {
        tips.textContent = '已退出画中画模式';
    });
</script>
不知不觉已经一点钟了，晚安！(～﹃～)~zZ

## Related

- Previous: [Object.entries() 与 Object.fromEntries() 方法应用](https://www.deathghost.cn/article/javascript/57)
- Next: [JS原生的深拷贝API structuredClone()](https://www.deathghost.cn/article/javascript/120)