DocumentPictureInPicture

有限可用性

此功能不是基线功能,因为它在一些最广泛使用的浏览器中不起作用。

实验性: 这是一个 实验性技术
在生产环境中使用此功能之前,请仔细查看 浏览器兼容性表

安全上下文: 此功能仅在 安全上下文(HTTPS)中可用,并且仅在某些或所有 支持的浏览器 中可用。

DocumentPictureInPicture 接口是 文档画中画 API 的入口点,用于创建和处理文档画中画窗口。

可以通过 Window.documentPictureInPicture 属性访问它。

EventTarget DocumentPictureInPicture

实例属性

window 只读 实验性

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

实例方法

requestWindow() 实验性

为当前主浏览上下文打开画中画窗口。返回一个 Promise,该 Promise 以 Window 实例的形式完成,表示画中画窗口内的浏览上下文。

事件

enter 实验性

当画中画窗口成功打开时触发。

示例

js
const videoPlayer = document.getElementById("player");

// ...

// Open a Picture-in-Picture window.
const pipWindow = await window.documentPictureInPicture.requestWindow({
  width: videoPlayer.clientWidth,
  height: videoPlayer.clientHeight,
});

// ...

有关完整的演示,请参阅 文档画中画 API 示例(另请参阅完整的 源代码)。

规范

规范
文档画中画
# documentpictureinpicture

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅