PictureInPictureWindow

**PictureInPictureWindow**接口是一个对象，它可以通过编程的方式获得浮动视频窗口的宽度和高度，并调整浮动视频窗口的大小。

使用HTMLVideoElement.requestPictureInPicture()返回一个具有此接口的 promise 值

属性

PictureInPictureWindow 接口不继承任何属性。

PictureInPictureWindow.width (en-US) 只读

获取浮动视频窗宽度。

PictureInPictureWindow.height (en-US) 只读

获取浮动视频窗高度。

Methods

The PictureInPictureWindow interface doesn't inherit any methods.

Events

The PictureInPictureWindow interface doesn't inherit any events.

PictureInPictureWindow.resize (en-US)

Sent to a PictureInPictureWindow when the floating video window is resized. The associated event handler is PictureInPictureWindow.onresize (en-US).

Examples

Given a <button> and a <video>, clicking the button will make the video enter the picture-in-picture mode; we then attach an event to print the floating video window dimensions to the console.

js

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

Specifications

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

Browser compatibility

BCD tables only load in the browser

See also