PictureInPictureWindow：resize 事件

resize 事件会在浮动视频窗口的大小改变时触发。

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

语法

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

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

onresize = (event) => {};

事件类型

PictureInPictureEvent (en-US)。继承自 Event。

Event PictureInPictureEvent (en-US)

事件属性

除了下列属性外，还可用来自父接口 Event 的属性。

PictureInPictureEvent.pictureInPictureWindow (en-US)

返回被调整大小的 PictureInPictureWindow 对象。

示例

窗口尺寸记录器

html
<p>调整浮动视频窗口尺寸以触发 <code>resize</code> 事件。</p>
<p>窗口高度：<span id="height"></span></p>
<p>窗口宽度：<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;
  // 或
  pictureInPictureWindow.addEventListener("resize", resize);
});

规范

Specification
Picture-in-Picture
# eventdef-pictureinpicturewindow-resize
Picture-in-Picture
# dom-pictureinpicturewindow-onresize

浏览器兼容性

BCD tables only load in the browser