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 zawsze znajduje się na wierzchu (okna obrazu w obrazie) i może wyświetlać dowolną treść 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.

Ponieważ interfejs Document PiP API może wyświetlać dowolną treść HTML, możesz go używać do odblokowywania nowych, ciekawych przypadków użycia.

Obsługa przeglądarek i progresywne ulepszanie

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

Nie powinno to jednak uniemożliwiać korzystania z niego w połączeniu z progresywnym ulepszaniem lub łagodną degradacją.

Planując przypadek użycia, traktuj go jako progresywne ulepszanie, a nie standardową funkcję. W tym artykule znajdziesz przykład łagodnej degradacji.

Ulepszanie wygody użytkowników korzystających z interfejsu Document PiP API

LearnHTMLCSS.online to interaktywna platforma edukacyjna, która uczy semantycznego i dostępnego kodu HTML i CSS. Oferuje 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 dotyczące wyzwania i kliknąć kartę Przeglądarka , aby wyświetlić podgląd na żywo.

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

Aby to zrobić, zacznij od sprawdzenia, czy przeglądarka obsługuje ten interfejs:

const isPipSupported = "documentPictureInPicture" in window;

Teraz możesz użyć tej zmiennej, aby opakować wszystkie wywołania documentPictureInPicture lub aby wcześniej powrócić z funkcji, która korzysta z interfejsu Document PiP. Poniższy kod sprawdza, czy interfejs Document PiP jest obsługiwany, 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ć okno do konkretnego elementu, bieżącego dokumentu 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 wyzwań z kodem CSS musisz też zsynchronizować CSS.

To wszystko. Masz teraz przycisk maksymalizacji, który otwiera się w osobnym oknie obrazu w obrazie.Oprócz maksymalizacji karty podglądu w przeglądarce 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 w przeglądarce na układ kolumnowy.

Kreacja zastępcza

Pamiętaj, że ten interfejs API ma ograniczoną dostępność. W przeglądarkach i na urządzeniach, które nie obsługują tego interfejsu API, musisz zapewnić zachowanie rezerwowe (płynne przechodzenie do starszej wersji).

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

Wypróbuj to zachowanie w różnych przeglądarkach: https://learnhtmlcss.online/app.html?id=2096

Nie zapomnij zwrócić uwagi na drobne szczegóły w etykietkach. Gdy isPipSupported ma wartość 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, zachowanie rezerwowe jest opisane za pomocą Maksymalizuj i Minimalizuj.

Jak widzisz, interfejs Document Picture-in-Picture API może odblokować nowe, ciekawe przypadki użycia w Twojej aplikacji internetowej, jeśli połączysz go z progresywnym ulepszaniem lub łagodną degradacją.

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

Zapoznaj się z dokumentacją interfejsu Document PiP, aby poznać różne przykłady i przypadki użycia tego interfejsu API.