PictureInPictureWindow

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

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

 PictureInPictureWindow 接口不继承任何属性。

PictureInPictureWindow.width 只读

获取浮动视频窗宽度。

PictureInPictureWindow.height 只读

获取浮动视频窗高度。

The PictureInPictureWindow interface doesn't inherit any methods.

The PictureInPictureWindow interface doesn't inherit any events.

PictureInPictureWindow.resize

Sent to a PictureInPictureWindow when the floating video window is resized. The associated event handler is PictureInPictureWindow.onresize.

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.

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

No compatibility data found. Please contribute data for "api.PictureInPictureWindow" (depth: 1) to the MDN compatibility data repository.

• Picture-in-Picture_API