HTMLVideoElement: requestPictureInPicture() 方法

可用性有限

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

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

视频不一定能进入画中画模式。如果授予了进入该模式的权限,则返回的 Promise 将会解决,并且视频会收到一个 enterpictureinpicture 事件,告知它现在已处于画中画模式。

语法

js
requestPictureInPicture()

参数

无。

返回值

一个 Promise,它会解析为一个 PictureInPictureWindow 对象,该对象可用于在用户调整此浮动窗口大小时进行监听。

异常

NotSupportedError DOMException

如果该功能不受支持(例如,由于用户偏好设置或平台限制而被禁用)则抛出。

SecurityError DOMException

如果该功能被 权限策略 (Permissions Policy) 阻止,则抛出。

InvalidStateError DOMException

如果视频元素的 readStateHAVE_NOTHING,或者视频元素没有视频轨道,或者视频元素的 disablePictureInPicture 属性为 true,则抛出。

NotAllowedError DOMException

如果 document.pictureInPictureElementnull 且文档没有 瞬时激活 (transient activation),则抛出。

安全

需要 瞬时用户激活 (Transient user activation)。用户必须与页面或 UI 元素进行交互,此功能才能工作。

示例

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

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

规范

规范
画中画
# request-pip

浏览器兼容性

另见