PictureInPictureWindow: resize Ereignis

Limited availability

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

Das resize Ereignis tritt auf, wenn das schwebende Video-Fenster in der Größe verändert wurde.

Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergegeben.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

onresize = (event) => {};

Ereignistyp

Ein PictureInPictureEvent. Erbt von Event.

Event PictureInPictureEvent

Ereigniseigenschaften

Neben den unten aufgeführten Eigenschaften sind auch die Eigenschaften der übergeordneten Schnittstelle Event verfügbar.

PictureInPictureEvent.pictureInPictureWindow

Gibt das PictureInPictureWindow zurück, das in der Größe verändert wurde.

Beispiele

Fenstergrößen-Protokollierer

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);
});

Spezifikationen

Specification
Picture-in-Picture
# eventdef-pictureinpicturewindow-resize
Picture-in-Picture
# dom-pictureinpicturewindow-onresize

Browser-Kompatibilität

BCD tables only load in the browser