PictureInPictureWindow

实例属性

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

规范

浏览器兼容性

参见

• 画中画 API