DocumentPictureInPicture

可用性有限

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

实验性: 这是一项实验性技术
在生产中使用此技术之前,请仔细检查浏览器兼容性表格

安全上下文: 此功能仅在安全上下文(HTTPS)中可用,且支持此功能的浏览器数量有限。

DocumentPictureInPicture 接口是 Document Picture-in-Picture API 的入口点,用于创建和管理画中画窗口。

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

EventTarget DocumentPictureInPicture

实例属性

继承其父级 EventTarget 的属性。

window 只读 实验性

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

实例方法

继承其父级 EventTarget 的方法。

requestWindow() 实验性

打开当前主浏览上下文的画中画窗口。返回一个 Promise,该 Promise 会以一个 Window 实例 fulfilled,该实例代表画中画窗口内的浏览上下文。

事件

继承其父级 EventTarget 的事件。

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,
});

// …

有关完整的可用演示,请参阅 Document Picture-in-Picture API 示例(也可查看完整的 源代码)。

规范

规范
文档画中画规范
# documentpictureinpicture

浏览器兼容性

另见