Mit der Document Picture-in-Picture API spannende Anwendungsfälle ermöglichen

Jad Joubran

Veröffentlicht: 4. März 2025

Mit der Document Picture-in-Picture API (Document PiP API) können Webanwendungen ein schwebendes, immer im Vordergrund angezeigtes Fenster (ein Bild-im-Bild-Fenster) öffnen, in dem beliebige HTML-Inhalte angezeigt werden können.

Diese API basiert auf der Bild-im-Bild-API für <video>, mit der Sie Videos in einem BiB-Fenster ansehen können.

Da mit der Document PiP API beliebige HTML-Inhalte angezeigt werden können, lassen sich damit spannende neue Anwendungsfälle realisieren.

Browserunterstützung und progressive Verbesserung

Zum Zeitpunkt der Erstellung dieses Dokuments ist die Document Picture-in-Picture API nur eingeschränkt verfügbar.

Das sollte Sie jedoch nicht davon abhalten, es mit progressiver Verbesserung oder Graceful Degradation zu verwenden.

Planen Sie Ihren Anwendungsfall als progressive Verbesserung und nicht als Standardfunktion. In diesem Artikel finden Sie ein Beispiel für die sanfte Herabstufung.

Nutzererfahrung von Lernenden mit der Document PiP API verbessern

LearnHTMLCSS.online ist eine interaktive Lernplattform, auf der semantisches und barrierefreies HTML und CSS vermittelt wird. Sie bietet einen interaktiven Texteditor und ein Browser-Vorschaufenster.

Im folgenden Screencast sehen Sie das Layout der App. Der Bildschirm ist in zwei Spalten unterteilt. Die erste Spalte enthält den Code-Editor. Die zweite Spalte enthält ein Layout mit Tabs. Standardmäßig kann der Nutzer die Anleitung der Challenge sehen und auf den Tab Browser klicken, um eine Live-Vorschau aufzurufen.

Als Schüler oder Student möchten Sie das Browser-Vorschaufenster möglicherweise maximieren. Das ist eine gute Gelegenheit, Unterstützung für die Document Picture-in-Picture API hinzuzufügen.

Prüfen Sie zuerst, ob der Browser die Funktion unterstützt:

const isPipSupported = "documentPictureInPicture" in window;

Sie können diese Variable jetzt verwenden, um documentPictureInPicture-Aufrufe zu umschließen oder um frühzeitig aus einer Funktion zurückzukehren, die auf Document-PiP basiert. Der folgende Code prüft, ob Document PiP unterstützt wird, und öffnet dann ein Document PiP-Fenster.

async function initDocumentPip() {
  if (!isPipSupported) {
    return false;
  }

  const pipWindow = await documentPictureInPicture.requestWindow({
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

Je nach Anwendungsfall können Sie eine beliebige Breite und Höhe für das Fenster angeben. Sie können versuchen, ein bestimmtes Element oder das aktuelle Dokument abzugleichen oder sogar feste Werte anzugeben.

Bisher haben Sie ein leeres Dokument. Jetzt müssen Sie sie mit Inhalten füllen.

// htmlCode is the HTML code of the challenge
pipWindow.document.documentElement.innerHTML = htmlCode;

Bei Problemen mit dem CSS-Code müssen Sie auch das CSS synchronisieren.

Geschafft! Es gibt jetzt einen Maximieren-Button, mit dem sich die Vorschau in einem separaten PiP-Fenster öffnen lässt. Sie können den Browser-Vorschautab nicht nur maximieren, sondern auch auf einen separaten Bildschirm verschieben, wenn Sie einen externen Monitor haben. Außerdem lässt sich das Layout der Haupt-Web-App und des Browser-Vorschautabs in ein Spaltenlayout ändern.

Fallback

Diese API ist nur eingeschränkt verfügbar. Bei Browsern und Geräten, die diese API nicht unterstützen, müssen Sie ein Fallback-Verhalten (Graceful Degradation) bereitstellen.

Anstatt dass durch Klicken auf die Schaltfläche zum Maximieren der gesamte Tab mit der Browser-Vorschau herausgezogen wird, kann die Schaltfläche so konfiguriert werden, dass sie den gesamten verbleibenden Platz der aktuellen Web-App einnimmt.

Testen Sie dieses Verhalten in verschiedenen Browsern: https://learnhtmlcss.online/app.html?id=2096

Achten Sie auf die kleinen Details in den Kurzinfos. Wenn isPipSupported gleich true ist, wechselt der Kurzinfo-Text der Schaltfläche zum Maximieren/Minimieren zwischen Bild im Bild aktivieren und Bild im Bild beenden. Wenn isPipSupported hingegen false ist, wird das Fallback-Verhalten mit Maximieren und Minimieren beschrieben.

Wie Sie sehen, kann die Document Picture-in-Picture API in Kombination mit Progressive Enhancement oder Graceful Degradation spannende neue Anwendungsfälle für Ihre Web-App ermöglichen.

Lassen Sie sich nicht durch die eingeschränkte Browserunterstützung einschränken und vergessen Sie nicht, einen angemessenen Fallback-Anwendungsfall zu haben.

In der Dokumentation zu Document PiP finden Sie verschiedene Beispiele und Anwendungsfälle für diese API.