PictureInPictureWindow

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

PictureInPictureWindow 接口表示一个能够以编程方式获取浮动视频窗口的 widthheightresize event 的对象。

通过使用 HTMLVideoElement.requestPictureInPicture() 函数返回的 promise 值,可以获得此接口的对象。

EventTarget PictureInPictureWindow

实例属性

PictureInPictureWindow 接口不继承任何属性。

PictureInPictureWindow.width 只读

获取浮动视频窗口的宽度。

PictureInPictureWindow.height 只读

获取浮动视频窗口的高度。

实例方法

PictureInPictureWindow 接口不继承任何方法。

事件

PictureInPictureWindow 接口不继承任何事件。

resize

当浮动视频窗口的大小改变时,发送给 PictureInPictureWindow

示例

给定一个 <button> 和一个 <video>,点击按钮会使视频进入画中画模式;接着我们添加一个事件,将浮动视频窗口的尺寸输出到控制台。

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

规范

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

浏览器兼容性

BCD tables only load in the browser

参见