文档画中画:requestWindow() 方法

有限可用性

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

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

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

requestWindow() 方法是 DocumentPictureInPicture 接口的方法,它为当前主浏览上下文打开画中画窗口。它返回一个 Promise,该 Promise 会用表示画中画窗口内浏览上下文的 Window 实例来完成。

requestWindow() 方法需要 瞬态激活,即必须响应用户操作(例如鼠标点击或按钮按下)来调用它。

语法

js
requestWindow()
requestWindow(options)

参数

options 可选

包含以下属性的选项对象

height

一个非负数,以像素为单位表示要为画中画窗口视窗设置的高度。如果未指定 options,则使用默认值 0。

width

一个非负数,以像素为单位表示要为画中画窗口视窗设置的宽度。如果未指定 options,则使用默认值 0。

注意: 如果指定了一个选项,则必须指定另一个选项,否则将抛出错误。如果两个值都没有指定、指定为 0 或设置过大,浏览器将根据需要对值进行限制或忽略,以提供合理的用户体验。限制后的尺寸将根据实现、显示尺寸和其他因素而有所不同。

返回值

一个 Promise,该 Promise 会用表示画中画窗口内浏览上下文的 Window 对象实例来完成。

异常

NotSupportedError DOMException

如果 API 已被显式禁用(例如通过浏览器设置),则抛出。

NotAllowedError DOMException

如果以下情况发生,则抛出:

RangeError DOMException

如果只设置了 heightwidth 之一,或者 heightwidth 设置为负值,则抛出。

示例

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

// ...

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

// ...

规范

规范
文档画中画
# dom-documentpictureinpicture-requestwindow

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅