Diese Seite wurde von der Cloud Translation API übersetzt.

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 sichtbares Fenster (ein Bild-im-Bild-Fenster) öffnen, in dem beliebige HTML-Inhalte angezeigt werden können.

Diese API basiert auf der Picture-in-Picture API für <video>, mit der du Videos in einem PiP-Fenster ansehen kannst.

Da die Document PiP API beliebige HTML-Inhalte anzeigen kann, eröffnen sich damit spannende neue Anwendungsfälle.

Browserunterstützung und progressive Verbesserung

Browser Support

Source

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.

Planen Sie Ihren Anwendungsfall als progressive Verbesserung und nicht als Standardfunktion. In diesem Artikel sehen Sie ein Beispiel für eine schrittweise Fehlertoleranz.

Nutzerfreundlichkeit für Lernende mit der Document PiP API verbessern

LearnHTMLCSS.online ist eine interaktive Lernplattform, auf der semantische und barrierefreie HTML- und CSS-Codes vermittelt werden. Es bietet einen interaktiven Texteditor und ein Browservorschaufenster.

Der folgende Screencast zeigt 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 Tab-Layout. Standardmäßig sehen Nutzer die Anleitung für die Herausforderung und können auf den Tab Browser klicken, um eine Live-Vorschau aufzurufen.

Als Schüler oder Student möchten Sie das Browserfenster für die Vorschau manchmal maximieren. Das ist eine gute Gelegenheit, die Unterstützung für die Picture-in-Picture API für Dokumente hinzuzufügen.

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

const isPipSupported = "documentPictureInPicture" in window;

Sie können diese Variable jetzt verwenden, um alle documentPictureInPicture-Aufrufe einzubetten oder eine Funktion, die auf dem PiP-Modus für Dokumente basiert, vorzeitig zu beenden. Im folgenden Code wird geprüft, ob die Funktion „Dokument im Bild-im-Bild-Modus“ unterstützt wird. Anschließend wird ein Fenster für den Modus geöffnet.

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, das aktuelle Dokument oder sogar feste Werte abzugleichen.

Bisher ist das Dokument leer. 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 Preisvergleichsportal synchronisieren.

Geschafft! Es gibt jetzt eine Maximierungsschaltfläche, die in einem separaten PiP-Fenster geöffnet wird. Sie können den Tab „Browservorschau“ nicht nur maximieren, sondern auch auf einen separaten Bildschirm verschieben, falls Sie einen externen Monitor haben. Außerdem können Sie die Haupt-Web-App und den Tab „Browservorschau“ in einem Spaltenlayout neu anordnen.

Fallback

Diese API ist nur eingeschränkt verfügbar. Für Browser und Geräte, auf denen diese API nicht unterstützt wird, müssen Sie ein Fallback-Verhalten (graceful degradation) angeben.

Anstatt dass die Maximierungsschaltfläche den gesamten Browservorschau-Tab maximiert, können wir festlegen, dass sie den gesamten verbleibenden Bereich der aktuellen Webanwendung einnimmt.

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

Achten Sie auch auf kleine Details in den Kurzinfos. Wenn isPipSupported = true ist, wechselt die Kurzinfo der Schaltfläche „Maximieren/Minimieren“ zwischen Bild im Bild aktivieren und Bild im Bild beenden. Wenn isPipSupported 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 eröffnen.

Lassen Sie sich nicht durch die eingeschränkte Browserunterstützung einschränken und denken Sie daran, einen angemessenen Fallback-Fall bereitzuhalten.

In der Dokumentation für die Dokument-PIP finden Sie verschiedene Beispiele und Anwendungsfälle für diese API.