PictureInPictureWindow

Limited availability

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

Das PictureInPictureWindow-Interface repräsentiert ein Objekt, das in der Lage ist, programmgesteuert die width und height sowie das resize event des schwebenden Videofensters zu erhalten.

Ein Objekt mit diesem Interface wird durch den Rückgabewert des Versprechens von HTMLVideoElement.requestPictureInPicture() erhalten.

EventTarget PictureInPictureWindow

Instanz-Eigenschaften

Das PictureInPictureWindow-Interface erbt keine Eigenschaften.

PictureInPictureWindow.width Schreibgeschützt

Bestimmt die Breite des schwebenden Videofensters.

PictureInPictureWindow.height Schreibgeschützt

Bestimmt die Höhe des schwebenden Videofensters.

Instanz-Methoden

Das PictureInPictureWindow-Interface erbt keine Methoden.

Ereignisse

Das PictureInPictureWindow-Interface erbt keine Ereignisse.

resize

Wird an ein PictureInPictureWindow gesendet, wenn das schwebende Videofenster in der Größe verändert wird.

Beispiele

Gegeben sind ein <button> und ein <video>. Wenn der Button geklickt wird, wechselt das Video in den Bild-in-Bild-Modus; wir fügen dann ein Ereignis an, um die Abmessungen des schwebenden Videofensters in die Konsole auszugeben.

js
const button = document.querySelector("button");
const video = document.querySelector("video");

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(
    `The floating window dimensions are: ${pipWindow.width}x${pipWindow.height}px`,
  );
  // will print:
  // The floating window dimensions are: 640x360px
}

button.onclick = () => {
  video.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};

Spezifikationen

Specification
Picture-in-Picture
# interface-picture-in-picture-window

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch