在版本69中，出现了PictureInPicture扩展名，它使您可以在所有窗口顶部显示视频。 我决定测试此功能并共享结果。
我立即找到一个示例，但是无法使用切换到画中画模式的画中画按钮（以下称为画中画），我去检查了
chrome标志
：//标志/＃enable-画中画 ，其值为“默认”，该标记等于“已启用”，但仍尝试手动启用它。
它没有帮助，结果我们需要另一个
chrome标志
：//标志/＃enable-surfaces-for-videos ，其值“默认”等同于“禁用”。
打开并获得。 他们还写道，有必要启用标志＃enable-experimental-web-platform-features，但是在没有我的情况下它可以工作。
例子
让我们举一个简单的例子，<video />标签，一个打开/关闭画中画模式的按钮，处理可用的画中画事件。
<html> <head> <title>Chrome 69</title> </head> <body> <video width="320" height="240" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> <br/> <button> PiP</button> <script> const video = document.querySelector('video'); const button = document.querySelector('button'); if (!document.pictureInPictureEnabled) { button.textContent = ' PiP .'; button.disabled = true; } button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } else { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); } }); video.addEventListener('enterpictureinpicture', () => { button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { button.textContent = ' PiP'; }); </script> </body> </html>
检查模式的可用性：
if (document.pictureInPictureEnabled){
很简单，如果属性存在，则返回true或false。
我们要求启动该模式：
button.addEventListener('click', () => { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); });
如果获得许可，则执行否则捕获。 如果不是由用户事件触发的，则该请求肯定会被拒绝。
启动document.pictureInPictureElement之后，将返回我们的<video />元素。
要退出此模式，您可以单击“画中画”窗口右上角的叉号。
您可以通过编程方式进行输出：
button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } });
退出document.pictureInPictureElement后，它将再次返回null。
PiP活动
有两个事件可用，分别是“画中画”模式打开和关闭：
video.addEventListener('enterpictureinpicture', () => { // button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { // button.textContent = ' PiP'; });
总结
目前，此模式仅适用于<video />标记，但可以扩展。
“画中画”窗口显示在右下角，到目前为止，我们不能对其进行影响。
画中画模式与全屏模式或另一种模式不兼容，这很合乎逻辑。
一次只能有一个PiP窗口。
用户启用了画中画模式的选项卡由图标指示（在KDPV上可见）。
UPD ：新的API是W3C部门，称为WICG（Web平台孵化器社区组）。
使用此API，站点可以控制何时打开和关闭“画中画”窗口，创建自己的按钮进行管理以及在用户使用画中画时收集统计信息。
一些浏览器已经支持此功能，但不基于W3C
（例如Opera和Yandex.Browser）。
Firefox和Edge尚未宣布实施新API。