作者GitHub：github.com/gitboyzcf 有兴趣可关注！！！

尽管效果可以，但是api兼容性不理想🤦‍

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。

Document Picture-in-Picture API（文档画中画API）

文档画中画API（pip api）可以打开一个始终在顶部的窗口，该窗口可以填充任意HTML内容，它扩展了早期的 画中画API，专门支持将HTML 元素放入始终在顶部的窗口中。

兼容性

window 内置 pip API

• documentPictureInPicture对象 它通过 window.documentPictureInPicture属性访问。 实例属性：

  • window返回一个 Window 实例，表示画中画窗口内的浏览器上下文。

  实例方法：

  • requestWindow()打开当前主浏览上下文的“画中画”窗口。返回一个 Promise ，返回结果就是一个“画中画”窗口Window实例。
  • close()关闭当前画中画窗口

  事件：

  • enter当画中画窗口成功打开时激发。
  • unload当画中画窗口关闭时触发。
  • click点击画中画文档时触发。

注意点（仔细阅读理解）

1. 网站一次只能打开一个画中画窗口，多个按钮触发画中画会进行替换。
2. 无法导航画中画窗口（更改为新文档的任何 window.history 或 window.location 调用将关闭PiP窗口）。
3. 画中画窗口永远不会超过打开的窗口。这意味着任何将打开器更改为新文档的导航（即使是同源导航）都将导致PiP窗口关闭。
4. 画中画窗口将浮在其他窗口的顶部。
5. 画中画窗口生命周期只存在于当前标签页。

推荐文章👇

Document Picture-in-Picture Specification
Tomodoro