Was ist Picture-in-Picture (PiP)?

Picture-in-Picture ist eine Browser-Funktion, mit der Sie ein Video aus dem aktuellen Tab in ein kleines schwebendes Fenster auslagern können, das über allem anderen auf Ihrem Bildschirm bleibt. Sie können es überall verschieben, in der Größe ändern und weiterhin ansehen, während Sie andere Tabs durchsuchen, Dokumente schreiben oder etwas anderes auf Ihrem Computer tun – das Video bleibt die ganze Zeit sichtbar.

PiP ist in allen modernen Desktop-Browsern (Chrome, Edge, Firefox, Safari) durch eine standardisierte Web-API integriert. Es erfordert keine Plugins oder Erweiterungen, und das schwebende Fenster wird vollständig vom Betriebssystem verwaltet, sodass es auch beim Wechsel zwischen Anwendungen erhalten bleibt.

Werkzeugbeschreibung

Dieses Werkzeug lädt jede direkte Video-URL in einen HTML5-Player und ermöglicht es Ihnen, es mit einem Klick im Picture-in-Picture-Modus zu starten. Fügen Sie einen Link zu einer öffentlich zugänglichen Videodatei ein, laden Sie ihn, und drücken Sie „Picture-in-Picture starten", um das Video in ein schwebendes Overlay-Fenster auszulagern.

Unterstützte Formate

Alle Videoformate, die der native HTML5-Player Ihres Browsers unterstützt:

  • MP4 (H.264 / H.265) — universell unterstützt
  • WebM (VP8 / VP9 / AV1) — unterstützt in Chrome, Firefox, Edge
  • OGG / OGV (Theora) — unterstützt in Firefox und Chrome
  • MOV — unterstützt in Safari; begrenzte Unterstützung anderswo
  • M4V — unterstützt in den meisten Chromium-basierten Browsern und Safari

Die Videodatei muss über HTTP/HTTPS bereitgestellt werden und der Server muss Cross-Origin-Anfragen (CORS) zulassen, damit der Browser sie laden kann.

Funktionsweise

  1. Die eingegebene URL wird als src eines Standard-HTML5-<video>-Elements geladen.
  2. Wenn Sie auf „Picture-in-Picture starten" klicken, ruft der Browser die native requestPictureInPicture()-API auf diesem Element auf.
  3. Der Browser lagert das Video in ein schwebendes Fenster aus, das vom OS-Fenster-Manager verwaltet wird.
  4. Durch Klicken auf „Picture-in-Picture beenden" (oder die Schaltfläche zum Schließen des schwebenden Fensters) wird exitPictureInPicture() aufgerufen und das Video wird zum Player zurückgebracht.

Funktionen

  • PiP-Start und -Beendigung mit einem Klick direkt aus dem Browser – keine Erweiterungen erforderlich
  • Funktioniert mit jeder öffentlich zugänglichen direkten Video-URL
  • 16:9-Player mit vollständigen nativen Steuerelementen (Wiedergabe, Pause, Suchen, Lautstärke, Vollbild)
  • Startet die Wiedergabe automatisch vor dem Eintritt in PiP, sodass das Video nicht eingefroren ist
  • Erkennt, wenn PiP im aktuellen Browser nicht unterstützt wird, und zeigt eine klare Meldung an

Anwendungsfälle

  • Sehen Sie sich ein Tutorial-Video in einem schwebenden Fenster an, während Sie in einem Code-Editor oder einem anderen Browser-Tab folgen
  • Überwachen Sie einen Live-Stream oder aufgezeichneten Video-Feed, während Sie in anderen Anwendungen arbeiten
  • Halten Sie eine Video-Referenz sichtbar, während Sie Dokumente, Tabellen oder Design-Dateien bearbeiten

Einschränkungen

  • Der Video-Server muss zulassen, dass die Datei von einem anderen Ursprung abgerufen wird (CORS-Header erforderlich). Viele CDNs und direkte Datei-Hosts tun dies bereits; einige tun es nicht.
  • PiP ist nicht in allen Browsern verfügbar – insbesondere einige mobile Browser und ältere Desktop-Versionen unterstützen die API nicht.
  • Streaming-Playlist-Formate wie HLS (.m3u8) und DASH (.mpd) werden nicht direkt unterstützt; nur Progressive-Download-URLs funktionieren.

Häufig gestellte Fragen

Warum wird das Video nicht geladen? Der Server, auf dem das Video gehostet wird, enthält möglicherweise nicht den Access-Control-Allow-Origin-Header, der das Cross-Origin-Laden ermöglicht, oder die URL erfordert möglicherweise eine Authentifizierung. Versuchen Sie einen direkten öffentlichen Link zu einer Videodatei.

Warum ist die PiP-Schaltfläche deaktiviert? Sie müssen zunächst ein Video laden, indem Sie eine URL eingeben und auf „Video laden" klicken. Die Schaltfläche wird aktiv, sobald eine Quelle festgelegt ist.

Funktioniert dies auf Mobilgeräten? Die Picture-in-Picture-API hat begrenzte Unterstützung auf mobilen Browsern. Auf iOS unterstützt Safari PiP für Videos, aber das Verhalten kann unterschiedlich sein. Auf Android kann Chrome es je nach Version und OS-Einstellungen unterstützen.