Ta strona została przetłumaczona przez Cloud Translation API.

Ciekawe zastosowania interfejsu Document Picture-in-Picture API

Jad Joubran

Data publikacji: 4 marca 2025 r.

Interfejs Document Picture-in-Picture API (Document PiP API) umożliwia aplikacjom internetowym otwieranie pływającego okna zawsze widocznego na wierzchu (okna Picture-in-Picture), które może wyświetlać dowolne treści HTML.

Ten interfejs API opiera się na interfejsie Picture-in-Picture API dla <video>, który umożliwia kontynuowanie oglądania filmu w oknie Picture-in-Picture.

Dokument PiP API może wyświetlać dowolne treści HTML, więc możesz go używać do tworzenia nowych, ekscytujących zastosowań.

Obsługa przeglądarek i stopniowe ulepszanie

Browser Support

Source

W momencie pisania tego artykułu interfejs API Obraz w obrazie dla dokumentów jest dostępny w ograniczonym zakresie.

Nie powinno to jednak uniemożliwiać korzystania z niego w ramach stopniowego ulepszania lub łagodnego degradacji.

Podczas planowania przypadku użycia pamiętaj, aby traktować go jako stopniowe ulepszanie, a nie standardową funkcję. W tym artykule znajdziesz przykład łagodnego degradacji.

Poprawa wrażeń uczących się dzięki interfejsowi Document PiP API

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

Ten film przedstawia układ aplikacji 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.

Czasami jako uczeń możesz chcieć zmaksymalizować okno podglądu w przeglądarce. To świetna 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 owijania wywołań documentPictureInPicture lub do wcześniejszego zakończenia funkcji, która korzysta z dokumentu w okienku. Poniższy kod sprawdza, czy obsługa dokumentu w trybie PiP jest dostępna, a następnie otwiera okno dokumentu w trybie 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ć określony element, bieżący dokument lub nawet podać stałe wartości.

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

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

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

Znakomicie. Dodano przycisk maksymalizacji, który otwiera okno PiP.Oprócz maksymalizacji karty podglądu przeglądarki możesz też przenieść ją na osobny ekran, jeśli masz zewnętrzny monitor, lub zmienić układ głównej aplikacji internetowej i karty podglądu przeglądarki, aby utworzyć 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 zapasowe (łagodne obniżenie jakości).

Zamiast otwierania całego podglądu w przeglądarce, przycisk maksymalizacji może zająć całą pozostałą przestrzeń w bieżącej aplikacji internetowej.

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

Zwróć uwagę na drobne szczegóły w etykiecie. Gdy isPipSupported = true, tekst pod przyciskiem maksymalizacji/minimalizacji zmienia się między Włącz obraz w obrazie a Wyłącz obraz w obrazie. Z drugiej strony, gdy isPipSupported = false, zachowanie zastępcze jest opisane za pomocą opcji Maksymalizuj i Minimalizuj.

Jak widzisz, interfejs Document Picture-in-Picture API może umożliwić tworzenie nowych, ekscytujących zastosowań Twojej aplikacji internetowej w połączeniu z funkcjami stopniowego ulepszania lub łagodnego degradacji.

Nie pozwól, aby ograniczona obsługa przeglądarki ograniczała Cię w jakiś sposób. Pamiętaj też, aby mieć odpowiednią opcję awaryjnego użycia.

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