PictureInPictureWindow

有限可用性

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

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

使用HTMLVideoElement.requestPictureInPicture() Promise 的返回值获取具有此接口的对象。

实例属性

PictureInPictureWindow 接口不继承任何属性。

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

实例方法

PictureInPictureWindow 接口不继承任何方法。

事件

PictureInPictureWindow 接口不继承任何事件。

调整大小: 当浮动视频窗口大小调整时，发送到 PictureInPictureWindow。

示例

给定一个 <button> 和一个 <video>，单击按钮将使视频进入画中画模式；然后我们附加一个事件，将浮动视频窗口尺寸打印到控制台。

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

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(
    `The floating window dimensions are: ${pipWindow.width}x${pipWindow.height}px`,
  );
  // will print:
  // The floating window dimensions are: 640x360px
}

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

规范

规范
画中画 # interface-picture-in-picture-window

浏览器兼容性

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

另请参阅

画中画 API