Video-Bild-im-Bild-Modus auf mehr Websites automatisch aktivieren

Benjamin Keen

François Beaufort

Veröffentlicht am 18. März 2026

Ab Chrome 142 können Web-Apps, die Audio oder Video abspielen, automatisch in den Bild-im-Bild-Modus wechseln, wenn sie einen Aktionshandler für Mediensitzungen registrieren. Das ist eine tolle Ergänzung für Musik- und Videoplayer, aber Entwickler müssen die Unterstützung explizit implementieren.

Um nahtloses Media-Multitasking zu ermöglichen und die Auffindbarkeit von Bild-im-Bild (BiB) zu verbessern, führt Chrome die vom Browser initiierte automatische BiB-Funktion ein. Mit dieser Funktion kann Chrome automatisch ein BiB-Fenster für Websites öffnen, für die kein Media Session Action Handler registriert wurde. So bleiben Ihre Medieninhalte sichtbar, wenn Sie zwischen Tabs wechseln.

Anleitung

Verwenden Sie Chrome 142 oder eine höhere Version auf dem Computer.
Aktivieren Sie in chrome://flags/#browser-initiated-automatic-picture-in-picture die Option „Browser initiated automatic picture in picture“ (Vom Browser initiierter automatischer Bild-im-Bild-Modus) und starten Sie Chrome neu.
Rufen Sie eine Videowebsite auf und spielen Sie ein Video ab (Beispiel).
Wechseln Sie zu einem anderen Chrome-Tab, um ein BiB-Fenster für das Video zu öffnen.

Funktionsweise

Wenn Sie Medien abspielen und zu einem anderen Tab wechseln, kann Chrome die Medien automatisch in ein Video-BiB-Fenster verschieben, das immer im Vordergrund angezeigt wird. Im Gegensatz zur vorhandenen Funktion „Auto-BiB für die Medienwiedergabe“, die entweder Video- oder beliebige HTML-Inhalte unterstützt (mit der Document Picture-in-Picture API), wird bei browserinitiierten Anfragen immer ein standardmäßiges Video-BiB-Fenster geöffnet.

Um eine hochwertige und nicht aufdringliche Nutzererfahrung zu gewährleisten, wird dieses Verhalten in Chrome nur ausgelöst, wenn eine Reihe strenger Bedingungen erfüllt sind:

Die URL des obersten Frames ist laut Safe Browsing-Dienst sicher.
Die Medien befinden sich im oberen Frame.
Die Medien waren in den letzten zwei Sekunden zu hören.
Die Medien haben den Audiofokus und werden wiedergegeben.
Es gibt einen einzelnen „normalen“ Player, d. h. ein nicht stummgeschaltetes Media-Element, das wiedergegeben wurde und nicht MediaStream verwendet.
Das Medienelement muss einen Videotrack haben.
Die Website verwendet die Kamera oder das Mikrofon nicht aktiv.
Der Schwellenwert für den Media Engagement Index des Nutzers wurde überschritten, was auf eine häufige Nutzung der Website hindeutet. Diese Bedingung gilt, wenn der Nutzer die Funktion nicht explizit zugelassen oder abgelehnt hat.
Derzeit ist kein BiB-Fenster geöffnet. Wenn bereits ein anderes BiB-Fenster geöffnet ist, wird in Chrome kein automatischer Übergang ausgelöst.

Vergleich von browserinitiiertem Auto-PiP (Website ohne enterpictureinpicture-Aktionshandler) und Auto-PiP für die Medienwiedergabe (bei dem die Website den Handler registriert hat).

Nutzerkontrolle und Datenschutz

Bei vom Browser initiierten Auto-PiP werden dieselben Nutzerberechtigungen und ‑einstellungen wie bei von der Website initiierten Anfragen berücksichtigt. Wenn eine Website zum ersten Mal automatisch in den PiP-Modus wechselt, wird in Chrome ein Berechtigungsdialogfeld angezeigt, in dem Nutzer gefragt werden, ob sie dieses Verhalten für die Website in Zukunft zulassen möchten.

Nutzer können diese Berechtigungen auch jederzeit über die Website-Einstellungen verwalten.

Entwicklerkontrolle und Deaktivierung

Diese Funktion ist so konzipiert, dass sie für die meisten Videowebsites sofort funktioniert. Sie können sie jedoch auch deaktivieren.

Eigenen Handler implementieren

Wenn Ihre Web-App bereits einen Media-Session-Aktionshandler für die Aktion enterpictureinpicture registriert, hat Ihre Implementierung Vorrang und Chrome leitet keine eigene automatische Umstellung ein.

Wenn Sie das Verhalten anpassen möchten, wenn Chrome der Meinung ist, dass ein Übergang angemessen ist, enthält der enterpictureinpicture-Aktionshandler ein reason im MediaSessionActionDetails. Sie können prüfen, ob reason contentoccluded ist (d. h., der Browser hat die Anfrage initiiert, weil der Tab ausgeblendet war), und entscheiden, wie Sie vorgehen möchten.

navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
  if (details.reason === "contentoccluded") {
    // The browser suggests entering Picture-in-Picture.
    // You can choose to open a standard video PiP or a Document PiP window, or do
    // nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
  }
});

Best Practices für Mediensitzungen

Bei der vom Browser initiierten automatischen Bild-im-Bild-Funktion hilft die Konfiguration Ihrer Mediensitzung Chrome, Ihre Inhalte zu verstehen und mit ihnen zu interagieren. Eine gut konfigurierte MediaSession sorgt dafür, dass das BiB-Fenster eine hohe Qualität bietet und Nutzer genaue Steuerelemente und Informationen erhalten.

Fortschrittsanzeige synchronisieren

Wenn die setPositionState API verwendet wird und die Position der Media-Sitzung nicht richtig aktualisiert wird, wird in PiP-Fenstern während der Medienwiedergabe ein ungenauer Fortschrittsbalken angezeigt. Um dies zu verhindern, aktualisieren oder entfernen Sie position state immer mit navigator.mediaSession.setPositionState(), wenn dies erforderlich ist (z. B. wenn sich die Media-Quelle ändert oder zurückgesetzt wird), damit das BiB-Fenster die richtige Position für die wiedergegebenen Medien anzeigt.

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);

Übergänge ordnungsgemäß abwickeln

Wenn auf Ihrer Website automatisch die nächste Folge abgespielt wird, müssen Ihre MediaSession-Aktionshandler und Metadaten während des Übergangs aktiv und korrekt bleiben. Wenn Aktionshandler während der Umstellung auf ein „Next“-Element entfernt oder deaktiviert werden, verliert das BiB-Fenster möglicherweise die Funktionen, die vom Handler bereitgestellt wurden.

Volle Kontrolle aktivieren

Neben den grundlegenden Funktionen zum Starten und Pausieren sollten Sie auch Handler für seekto, previoustrack und nexttrack implementieren. So können Nutzer Ihre Inhalte direkt über das BiB-Fenster aufrufen, ohne zum ursprünglichen Tab zurückkehren zu müssen.

navigator.mediaSession.setActionHandler("seekto", (details) => {
  if (details.fastSeek && "fastSeek" in video) {
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
});

Feedback geben

Wenn Sie Feedback zu diesem Verhalten haben oder Probleme damit auftreten, können Sie es unter crbug.com melden.

Video-Bild-im-Bild-Modus auf mehr Websites automatisch aktivieren Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.