对任何元素（而不仅仅是“视频”）实现画中画

François Beaufort
François Beaufort
GitHub

Browser Support

  • Chrome: 116.
  • Edge: 116.
  • Firefox: not supported.
  • Safari: not supported.

Source

借助文档画中画 API，您可以打开一个始终位于顶部的窗口，该窗口可以填充任意 HTML 内容。它扩展了现有的 Picture-in-Picture API（适用于 <video>），该 API 仅允许将 HTML <video> 元素放入画中画窗口中。

Document Picture-in-Picture API 中的画中画窗口类似于通过 window.open() 打开的空白同源窗口，但存在一些差异：

  • 画中画窗口会浮动在其他窗口之上。
  • 画中画窗口的生命周期永远不会超过打开窗口的生命周期。
  • 无法在画中画窗口中导航。
  • 网站无法设置画中画窗口位置。