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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PictureInPictureWindow
height
resize event
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch