PictureInPictureWindow：resize 事件
当浮动视频窗口被调整大小时，会触发 resize 事件。
此事件不可取消，也不会冒泡。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("resize", (event) => { })
onresize = (event) => { }
事件类型
一个 PictureInPictureEvent。继承自 Event。
事件属性
除了下面列出的属性之外，父接口 Event 的属性也可使用。
示例
窗口大小记录器
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 |
浏览器兼容性
加载中…