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

Jad Joubran

Veröffentlicht am 4. März 2025

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

Diese API basiert auf der Picture-in-Picture API für <video>, mit der Sie Videos in einem Bild-im-Bild-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 Artikels ist die Document Picture-in-Picture API nur eingeschränkt verfügbar.

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

Wenn Sie Ihren Anwendungsfall planen, sollten Sie ihn als progressive Verbesserung und nicht als Standardfunktion behandeln. In diesem Artikel sehen Sie ein Beispiel für Graceful Degradation.

Nutzerfreundlichkeit für Lernende 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 sieht der Nutzer die Anweisungen der Aufgabe und kann auf den Tab Browser klicken, um eine Live-Vorschau zu sehen.

Als Lernender möchten Sie möglicherweise manchmal das Browser-Vorschaufenster maximieren. Das ist eine perfekte Gelegenheit, die Unterstützung für die Document Picture-in-Picture API hinzuzufügen.

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

const isPipSupported = "documentPictureInPicture" in window;

Sie können diese Variable jetzt verwenden, um alle 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 angeben.

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

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

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

Jetzt weißt du Bescheid. Sie haben jetzt eine Schaltfläche zum Maximieren, die in einem separaten Bild-im-Bild-Fenster geöffnet wird. Sie können den Tab mit der Browser-Vorschau nicht nur maximieren, sondern auch auf einen separaten Bildschirm verschieben, wenn Sie einen externen Monitor haben. Außerdem können Sie die Haupt-Web-App und den Tab mit der Browser-Vorschau in einem Spaltenlayout anordnen.

Fallback

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

Anstatt die gesamte Browser-Vorschau mit der Schaltfläche zum Maximieren herauszuziehen, können wir sie den gesamten verbleibenden Platz der aktuellen Webanwendung einnehmen lassen.

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

Achten Sie auf kleine Details in den Tooltips. Wenn isPipSupported true ist, wechselt der Tooltip der Schaltfläche zum Maximieren/Minimieren zwischen Bild-im-Bild-Modus aktivieren und Bild-im-Bild-Modus 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 progressiver Verbesserung oder Graceful Degradation spannende neue Anwendungsfälle für Ihre Webanwendung ermöglichen.

Lassen Sie sich nicht von der eingeschränkten Browserunterstützung einschränken und vergessen Sie nicht, einen geeigneten Fallback-Anwendungsfall zu haben.

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