Veröffentlicht: 5. Februar 2025
Ab Chrome 120 können Web-Apps für Videokonferenzen automatisch ein Bild-im-Bild-Fenster öffnen, wenn der Nutzer den Fokus vom aktuellen Tab weicht. Das ist nützlich für Moderatoren, die die Teilnehmer in Echtzeit sehen und mit ihnen interagieren möchten, während sie ein Dokument präsentieren oder andere Tabs oder Fenster verwenden. Weitere Informationen finden Sie unter Automatischer Bild‑im‑Bild-Modus für Web-Apps für Videokonferenzen.
Ab Chrome 134 können Web-Apps, die Audio oder Video abspielen, automatisch in den Bild-im-Bild-Modus wechseln. Das bedeutet, dass Musik- und Videoplayer im Web jetzt nahtlos zu einem Miniplayerfenster wechseln können, wenn der Nutzer den Tab wechselt. Eine manuelle Aktivierung ist nicht mehr erforderlich.
Um diese Anwendungsfälle für die Medienwiedergabe zu unterstützen, können ab Chrome 134 Desktop-Web-Apps automatisch in den Bild-im-Bild-Modus wechseln. Es gelten jedoch einige Einschränkungen, um die Nutzerfreundlichkeit zu gewährleisten. Eine Web-App kann nur dann automatisch den Modus „Bild im Bild“ für die Medienwiedergabe verwenden, wenn sie alle folgenden Bedingungen erfüllt:
Die URL des oberen Frames ist laut Safe Browsing-Dienst sicher.
Die Medien befinden sich im oberen Frame.
Die Medien sind innerhalb der letzten zwei Sekunden zu hören.
Die Medien haben den Audiofokus.
Die Medien werden abgespielt.
Für die Aktion
"enterpictureinpicture"
wurde ein Handler für Media-Sitzungsaktionen registriert.Der Grenzwert für den Index für die Medieninteraktion des Nutzers wurde überschritten. Das bedeutet, dass der Nutzer häufig Medien in dieser Webanwendung nutzt. Das gilt, wenn die Browsereinstellung des Nutzers „Kann um Bild-im-Bild-Modus bitten“ lautet. Wenn der Nutzer der Web-App ausdrücklich erlaubt, den Bild-im-Bild-Modus zu aktivieren, gilt diese Bedingung nicht.

Der Fehler 386193409 verfolgt die Implementierung von Bedingungen für die Präsentation, um das Debugging und die Implementierung zu erleichtern.
Wenn bereits ein anderes Bild-im-Bild-Fenster geöffnet ist, löst Chrome den automatischen Bild-im-Bild-Modus nicht aus. Diese Regel gilt nicht, wenn das vorhandene Bild-im-Bild-Fenster automatisch geöffnet wurde und kurz vor dem Schließen steht.
Wenn eine Webanwendung die Anforderungen erfüllt, löst das Wechseln des Fokus auf einen anderen Tab die Callback-Funktion des Media-Sitzungs-Aktions-Handlers für die Aktion "enterpictureinpicture"
aus. So kann die Webanwendung ein Bild-im-Bild-Fenster ohne Nutzergeste öffnen. Daraufhin wird dem Nutzer möglicherweise ein Berechtigungsdialogfeld angezeigt, in dem er gefragt wird, ob er der Website erlauben möchte, jedes Mal, nur dieses Mal oder nie automatisch in den Bild-im-Bild-Modus zu wechseln.

Sie können entweder die Bild-im-Bild-API für <video> verwenden, um ein Bild-im-Bild-Fenster über ein HTML-<video>
-Element zu öffnen, oder die Bild-im-Bild-API für Dokumente, um ein immer sichtbares Fenster zu öffnen, das mit beliebigen HTML-Inhalten gefüllt werden kann. Das Bild-im-Bild-Fenster ist beim Öffnen nicht im Fokus und wird automatisch geschlossen, wenn die Seite wieder sichtbar wird.
Im folgenden Beispiel wird gezeigt, wie ein HTML-<video>
-Element wiedergegeben wird, wenn ein Nutzer auf eine Schaltfläche klickt. Registrieren Sie dann einen Media-Session-Aktions-Handler für die Aktion "enterpictureinpicture"
mit einer Callback-Funktion, die ein Bild-im-Bild-Fenster öffnet. Dieses Fenster enthält das Video mit der Picture-in-Picture API für <video>.
const video = document.querySelector("video");
async function onPlayButtonClick() {
// Play video.
await video.play();
}
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
await video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
Testen Sie die VideoJS-Player-Demo, in der die Document Picture-in-Picture API vorgestellt wird, oder spielen Sie mit den Samples Video Media Session und Audio Media Session.
Feedback geben und erhalten
Wenn Sie Feedback haben oder Probleme auftreten, können Sie sich unter crbug.com an uns wenden.
Ressourcen
Danksagung
Vielen Dank an Benjamin Keen und Frank Liberato für ihre Rezensionen.