PictureInPictureWindow: resize event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Sự kiện resize kích hoạt khi cửa sổ video nổi đã được thay đổi kích thước.
Sự kiện này không thể hủy và không nổi bọt.
Cú pháp
Dùng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.
js
addEventListener("resize", (event) => { })
onresize = (event) => { }
Loại sự kiện
Một PictureInPictureEvent. Kế thừa từ Event.
Thuộc tính sự kiện
Ngoài các thuộc tính được liệt kê bên dưới, các thuộc tính từ giao diện cha, Event, cũng có sẵn.
PictureInPictureEvent.pictureInPictureWindow-
Trả về
PictureInPictureWindowđang được thay đổi kích thước.
Ví dụ
Ghi log kích thước cửa sổ
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);
});
Thông số kỹ thuật
| Specification |
|---|
| Picture-in-Picture # eventdef-pictureinpicturewindow-resize |
| Picture-in-Picture # dom-pictureinpicturewindow-onresize |