Ciekawe zastosowania interfejsu Document Picture-in-Picture API

Jad Joubran

Opublikowano: 4 marca 2025 r.

Interfejs Document Picture-in-Picture API (Document PiP API) umożliwia aplikacjom internetowym otwieranie pływającego okna, które jest zawsze na wierzchu (okno obrazu w obrazie) i może wyświetlać dowolną zawartość HTML.

Ten interfejs API jest oparty na interfejsie Picture-in-Picture API dla <video>, który umożliwia dalsze oglądanie filmów w oknie obrazu w obrazie.

Interfejs Document PiP API może wyświetlać dowolne treści HTML, więc możesz go używać w nowych, interesujących przypadkach.

Obsługa przeglądarek i stopniowe ulepszanie

W momencie pisania tego artykułu interfejs Document Picture-in-Picture API jest dostępny w ograniczonym zakresie.

Nie powinno to jednak powstrzymywać Cię od używania go z progresywnym ulepszaniem lub wdrożeniem w sposób bezpieczny.

Planując przypadek użycia, traktuj go jako stopniowe ulepszenie, a nie standardową funkcję. W tym artykule znajdziesz przykład stopniowego wycofywania.

Poprawa wrażeń użytkowników korzystających z platformy edukacyjnej dzięki interfejsowi Document PiP API

LearnHTMLCSS.online to interaktywna platforma edukacyjna, która uczy semantycznego i dostępnego kodu HTML i CSS. Udostępnia interaktywny edytor tekstu i okno podglądu w przeglądarce.

Poniższy screencast pokazuje układ aplikacji. Ekran jest podzielony na 2 kolumny. Pierwsza kolumna zawiera edytor kodu. Druga kolumna zawiera układ z kartami. Domyślnie użytkownik może zobaczyć instrukcje wyzwania i kliknąć kartę Przeglądarka, aby wyświetlić podgląd na żywo.

Jako uczeń możesz czasami chcieć zmaksymalizować okno podglądu przeglądarki. To doskonała okazja, aby dodać obsługę interfejsu Document Picture-in-Picture API.

Aby to zrobić, najpierw sprawdź, czy przeglądarka obsługuje tę funkcję:

const isPipSupported = "documentPictureInPicture" in window;

Możesz teraz używać tej zmiennej do opakowywania wywołań documentPictureInPicture lub do wczesnego powrotu z funkcji, która korzysta z obrazu w obrazie w Dokumentach. Poniższy kod sprawdza, czy funkcja Document PiP jest obsługiwana, a następnie otwiera okno Document PiP.

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

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

W zależności od przypadku użycia możesz określić dowolną szerokość i wysokość okna. Możesz spróbować dopasować konkretny element, bieżący dokument lub nawet podać stałe wartości.

Na razie masz pusty dokument. Teraz musisz wypełnić go treścią.

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

W przypadku problemów z kodem CSS musisz też zsynchronizować CSS.

To wszystko. Teraz masz przycisk maksymalizacji, który otwiera się w osobnym oknie obrazu w obrazie.Oprócz maksymalizacji karty podglądu przeglądarki możesz też przenieść ją na osobny ekran, jeśli masz zewnętrzny monitor, lub nawet zmienić układ głównej aplikacji internetowej i karty podglądu przeglądarki na układ kolumnowy.

Wycofanie

Pamiętaj, że ten interfejs API jest dostępny w ograniczonym zakresie. W przypadku przeglądarek i urządzeń, które nie obsługują tego interfejsu API, musisz zapewnić działanie zastępcze (stopniowe wycofywanie).

Zamiast sprawiać, że przycisk maksymalizacji wyciąga całą kartę podglądu przeglądarki, możemy sprawić, że zajmie on całą pozostałą przestrzeń bieżącej aplikacji internetowej.

Sprawdź to działanie w różnych przeglądarkach: https://learnhtmlcss.online/app.html?id=2096

Nie zapomnij zwrócić uwagi na drobne szczegóły w etykietkach. Gdy wartość isPipSupported to true, etykietka przycisku maksymalizacji/minimalizacji przełącza się między Włącz obraz w obrazie a Wyłącz obraz w obrazie. Z drugiej strony, gdy isPipSupported ma wartość false, działanie rezerwowe jest opisane za pomocą wartości Maksymalizuj i Minimalizuj.

Jak widać, interfejs Document Picture-in-Picture API może w połączeniu z progresywnym ulepszaniem lub płynnym przechodzeniem do starszej wersji odblokować nowe, ciekawe przypadki użycia aplikacji internetowej.

Nie pozwól, aby ograniczone wsparcie przeglądarek Cię ograniczało, i nie zapomnij o odpowiednim przypadku użycia rezerwowego.

Aby poznać różne przykłady i przypadki użycia tego interfejsu API, zapoznaj się z dokumentacją dotyczącą funkcji Obraz w obrazie w Dokumentach.