PictureInPictureWindow:resize 事件

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

當浮動影片視窗被調整大小時,會觸發 resize 事件。

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

語法

在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。

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

onresize = (event) => { }

事件型別

一個 PictureInPictureEvent。繼承自 Event

Event PictureInPictureEvent

事件屬性

除了下面列出的屬性之外,父介面 Event 的屬性也可使用。

PictureInPictureEvent.pictureInPictureWindow

返回被調整大小的 PictureInPictureWindow

示例

視窗大小記錄器

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

瀏覽器相容性