PictureInPictureWindow - 表示能够获取浮动视频窗口的信息的对象

PictureInPictureWindow 接口表示能够以编程方式获取浮动视频窗口的宽度和高度以及调整大小事件的对象。

使用 HTMLVideoElement.requestPictureInPicture() Promise 的返回值，可以获得该接口的对象。

属性

PictureInPictureWindow 接口没有继承任何属性。

PictureInPictureWindow.width 只读

表示浮动视频窗口的宽度。

PictureInPictureWindow.height 只读

表示浮动视频窗口的高度。

方法

PictureInPictureWindow 接口没有继承任何方法。

事件

PictureInPictureWindow 接口没有继承任何事件。

PictureInPictureWindow.resize

当浮动视频窗口调整大小时发送到 PictureInPictureWindow。关联的事件处理程序是 PictureInPictureWindow.onresize。

实例

给定一个 <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 = function() {
  video.requestPictureInPicture().then(pictureInPictureWindow => {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};

规范

规范
Picture-in-Picture # interface-picture-in-picture-window

桌面浏览器兼容性

暂无兼容数据

相关链接

• Picture-in-Picture_API