Die Zukunft von Bild im Bild

François Beaufort

Vor der Document Picture-in-Picture API konnte nur ein HTML-<video>-Element in ein Bild-im-Bild-Fenster eingefügt werden. Mit dieser neuen API können Sie ein Fenster öffnen, das immer im Vordergrund angezeigt wird und mit beliebigen HTML-Inhalten gefüllt werden kann. Sie ist ab Chrome 111 auf dem Computer als Ursprungstest verfügbar.

Ein Bild-im-Bild-Fenster, das mit der Document Picture-in-Picture API erstellt wurde (Demo).

Die neue API bietet viel mehr als die vorhandene Picture-in-Picture API für <video>. Du kannst beispielsweise benutzerdefinierte Steuerelemente und Eingaben wie Untertitel, Playlists, Zeitsprünge, „Mag ich“- und „Mag ich nicht“-Bewertungen für den Bild-in-Bild-Videoplayer bereitstellen.

Mit einem vollständigen Dokument im Bild-im-Bild-Modus können Web-Apps für Videokonferenzen mehrere Videostreams in einem einzigen Bild-im-Bild-Fenster kombinieren, ohne auf Canvas-Hacks zurückgreifen zu müssen. Außerdem können sie benutzerdefinierte Steuerelemente bereitstellen, z. B. zum Senden einer Nachricht, zum Stummschalten eines anderen Nutzers oder zum Heben der Hand.

Im folgenden Code-Snippet wird gezeigt, wie Sie die Funktion „Bild-im-Bild“ für einen benutzerdefinierten Videoplayer aktivieren und deaktivieren.

async function togglePictureInPicture() {
  // Close Picture-in-Picture window if any.
  if (documentPictureInPicture.window) {
    documentPictureInPicture.window.close();
    return;
  }

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow({
    initialAspectRatio: 640 / 360,
    copyStyleSheets: true,
  });

  // Move video to the Picture-in-Picture window.
  const video = document.querySelector("#video");
  pipWindow.document.body.append(video);

  // Listen for the PiP closing event to move the video back.
  pipWindow.addEventListener("unload", (event) => {
    const videoContainer = document.querySelector("#videoContainer");
    const pipVideo = event.target.querySelector("#video");
    videoContainer.append(pipVideo);
  });
}

Weitere Informationen findest du unter Bild-im-Bild für alle Elemente, nicht nur für <video>.

Das Feedback von Entwicklern ist in dieser Phase sehr wichtig. Bitte melden Sie Probleme auf GitHub, wenn Sie Vorschläge und Fragen haben.