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 wird ausgelöst, wenn das schwebende Video-Fenster in der Größe verändert wurde.
Dieses Ereignis kann nicht abgebrochen werden und wird nicht nach oben weitergereicht.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
js
addEventListener("resize", (event) => { })
onresize = (event) => { }
Ereignistyp
Ein PictureInPictureEvent. Erbt von Event.
Eigenschaften des Ereignisses
Zusätzlich zu den unten aufgeführten Eigenschaften sind Eigenschaften von der übergeordneten Schnittstelle, Event, verfügbar.
PictureInPictureEvent.pictureInPictureWindow-
Gibt das
PictureInPictureWindowzurück, das in der Größe verändert wurde.
Beispiele
Fenstergrößen-Logger
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 |