PictureInPictureWindow: 调整大小事件

有限可用性

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

当浮动视频窗口已调整大小时，将触发 **resize** 事件。

此事件不可取消，也不会冒泡。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("resize", (event) => {});

onresize = (event) => {};

事件类型

一个 PictureInPictureEvent。继承自 Event。

Event PictureInPictureEvent

事件属性

除了下面列出的属性外，父接口 Event 中的属性也可用。

PictureInPictureEvent.pictureInPictureWindow

返回正在调整大小的 PictureInPictureWindow。

示例

窗口大小记录器

html
<p>Resize the floating video window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
<video id="video" src="" muted autoplay></video>
js
const video = document.querySelector("#video");
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function resize(evt) {
  heightOutput.textContent = evt.target.height;
  widthOutput.textContent = evt.target.width;
}

video.requestPictureInPicture().then((pictureInPictureWindow) => {
  pictureInPictureWindow.onresize = resize;
  // or
  pictureInPictureWindow.addEventListener("resize", resize);
});

规范

规范
画中画
# eventdef-pictureinpicturewindow-resize
画中画
# dom-pictureinpicturewindow-onresize

浏览器兼容性

BCD 表格仅在浏览器中加载