Vor der Document Picture-in-Picture API konnte nur ein HTML-<video>-Element in ein Bild-im-Bild-Fenster eingefügt werden. Diese neue API ermöglicht es, ein Always-on-Top-Fenster zu öffnen, das mit beliebigen HTML-Inhalten gefüllt werden kann. Sie ist als Ursprungstest ab Chrome 111 auf Computern verfügbar.
Die neue API bietet viel mehr, als mit der bestehenden Picture-in-Picture API für <video> verfügbar ist. Du kannst beispielsweise Untertitel, Playlists, Zeit-Scrubber und Videos mit „Mag ich“ oder „Mag ich nicht“ verwenden, um den Bild-im-Bild-Player für Nutzer zu optimieren.
Mit der Funktion „Dokument im Bild“ können Web-Apps für Videokonferenzen mehrere Videostreams in einem einzigen Bild-im-Bild-Fenster zusammenfassen, ohne dass Canvas-Hacks nötig sind. Sie können auch benutzerdefinierte Steuerelemente anbieten, z. B. um eine Nachricht zu senden, einen anderen Nutzer stummzuschalten oder sich zu melden.
Im folgenden Code-Snippet sehen Sie, wie Bild im Bild für einen benutzerdefinierten Videoplayer ein-/ausgeschaltet wird.
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 jedes Element, nicht nur für <video>.
Entwicklerfeedback ist in dieser Phase sehr wichtig. Bitte melden Sie Probleme auf GitHub mit Vorschlägen und Fragen.
Hero-Image von Jakob Owens.