PictureInPictureWindow:resize 事件

Limited availability

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

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

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

语法

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

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

onresize = (event) => {};

事件类型

事件属性

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

PictureInPictureEvent.pictureInPictureWindow

返回被调整大小的 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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
resize event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.