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
的属性。
示例
窗口尺寸记录器
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