Vor der Document Picture-in-Picture API war es nur möglich, ein HTML-<video>-Element in ein Bild-im-Bild-Fenster einzufügen. Dieses neue API ermöglicht es, ein Always-On-Fenster zu öffnen, das mit beliebigem HTML-Inhalt ausgefüllt werden kann. Sie ist als Ursprungstest ab Chrome 111 auf dem Computer verfügbar.
Die neue API bietet wesentlich mehr als die bisherige Picture-in-Picture API für <video>. Sie können beispielsweise benutzerdefinierte Steuerelemente und Eingaben bereitstellen (z. B. Untertitel, Playlists, den Zeit-Scrubber oder „Mag ich“- bzw. „Mag ich nicht“-Bewertungen), um den Bild-im-Bild-Videoplayer für Nutzer zu optimieren.
Dank der Funktion „Bild im Bild“ für ein vollständiges Dokument lassen sich in Webanwendungen für Videokonferenzen mehrere Videostreams in einem einzigen Bild-im-Bild-Fenster kombinieren, ohne sich auf Canvas-Hacks verlassen zu müssen. Außerdem haben sie die Möglichkeit, benutzerdefinierte Einstellungen vorzunehmen, z. B. um eine Nachricht zu senden, einen anderen Nutzer zu ignorieren oder sich zu melden.
Im folgenden Code-Snippet sehen Sie, wie Sie den Bild-im-Bild-Modus für einen benutzerdefinierten Videoplayer aktivieren oder deaktivieren können.
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 finden Sie unter Bild im Bild für jedes Element, nicht nur für <video>.
Entwicklerfeedback ist in dieser Phase sehr wichtig. Bitte melde Probleme auf GitHub und stelle Fragen und Vorschläge bereit.
Hero-Image von Jakob Owens.