PictureInPictureWindow: resize-Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Das resize-Ereignis wird ausgelöst, wenn die Größe des schwebenden Videofensters geändert wurde.
Dieses Ereignis kann nicht abgebrochen werden und wird nicht nach oben weitergegeben.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
js
addEventListener("resize", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
js
onresize = (event) => { }
Ereignistyp
Ein PictureInPictureEvent. Erbt von Event.
Beispiele
Fenstergröße protokollieren
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) => {
// Use onresize (but note that this replaces other event listeners
// added using onresize, if any)
pictureInPictureWindow.onresize = resize;
// or
pictureInPictureWindow.addEventListener("resize", resize);
});
Spezifikationen
| Spezifikation |
|---|
| Picture-in-Picture # eventdef-pictureinpicturewindow-resize |
| Picture-in-Picture # dom-pictureinpicturewindow-onresize |