HTMLVideoElement：requestPictureInPicture() 方法

可用性有限

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

HTMLVideoElement 方法 requestPictureInPicture() 发出异步请求以在画中画模式下显示视频。

无法保证视频一定会进入画中画模式。如果授予进入该模式的权限，则返回的 Promise 将被解析，并且视频将收到一个 enterpictureinpicture 事件，以告知它现在处于画中画状态。

语法

js
requestPictureInPicture()

参数

无。

返回值

一个 Promise，它将解析为一个 PictureInPictureWindow 对象，该对象可用于监听用户何时调整该浮动窗口的大小。

异常

NotSupportedError DOMException

如果该功能不受支持（例如，由用户偏好或平台限制禁用），则抛出此异常。

SecurityError DOMException

如果该功能被 权限策略 阻止，则抛出此异常。

InvalidStateError DOMException

如果视频元素的 readState 为 HAVE_NOTHING，或者视频元素没有视频轨道，或者视频元素的 disablePictureInPicture 属性为 true，则抛出此异常。

NotAllowedError DOMException

如果 document.pictureInPictureElement 为 null 并且文档没有 瞬时激活，则抛出此异常。

安全

需要 瞬时用户激活。用户必须与页面或 UI 元素交互才能使用此功能。

示例

此示例请求视频进入画中画模式，并设置事件监听器以处理浮动窗口大小调整。

js
function enterPictureInPicture() {
  videoElement.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.addEventListener(
      "resize",
      () => onPipWindowResize(),
      false,
    );
  });
}

规范

规范
画中画
# request-pip

浏览器兼容性

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

另请参阅