PictureInPictureWindow

PictureInPictureWindow 接口表示一个能够以编程方式获取浮动视频窗口的 width 和 height 和 resize event 的对象。

通过使用 HTMLVideoElement.requestPictureInPicture() 函数返回的 promise 值，可以获得此接口的对象。

实例属性

PictureInPictureWindow 接口不继承任何属性。

PictureInPictureWindow.width 只读: 获取浮动视频窗口的宽度。
PictureInPictureWindow.height 只读: 获取浮动视频窗口的高度。

实例方法

PictureInPictureWindow 接口不继承任何方法。

事件

PictureInPictureWindow 接口不继承任何事件。

resize: 当浮动视频窗口的大小改变时，发送给 PictureInPictureWindow。

示例

给定一个 <button> 和一个 <video>，点击按钮会使视频进入画中画模式；接着我们添加一个事件，将浮动视频窗口的尺寸输出到控制台。

const button = document.querySelector("button");
const video = document.querySelector("video");

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(`浮动窗口的尺寸为：${pipWindow.width}x${pipWindow.height}px`);
  // 将会打印：
  // 浮动窗口的尺寸为：640x360px
}

button.onclick = () => {
  video.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};

规范

Specification
Picture-in-Picture # interface-picture-in-picture-window

浏览器兼容性

BCD tables only load in the browser

参见

画中画 API