Co to jest Picture-in-Picture (PiP)?

Picture-in-Picture to funkcja przeglądarki, która pozwala wyciągnąć wideo z bieżącej karty do małego pływającego okna, które pozostaje na wierzchu wszystkich innych elementów na ekranie. Możesz je przesuwać w dowolne miejsce, zmieniać jego rozmiar i kontynuować oglądanie podczas przeglądania innych kart, pisania dokumentów lub robienia czegokolwiek innego na komputerze — wideo pozostaje widoczne przez cały czas.

PiP jest wbudowany we wszystkie nowoczesne przeglądarki stacjonarne (Chrome, Edge, Firefox, Safari) poprzez standardowy web API. Nie wymaga wtyczek ani rozszerzeń, a pływające okno jest zarządzane całkowicie przez system operacyjny, więc utrzymuje się nawet po przełączeniu się między aplikacjami.

Opis narzędzia

To narzędzie ładuje dowolny bezpośredni adres URL wideo do odtwarzacza HTML5 i pozwala uruchomić go w trybie Picture-in-Picture jednym kliknięciem. Wklej link do publicznie dostępnego pliku wideo, załaduj go i naciśnij „Uruchom Picture-in-Picture", aby odłączyć wideo do pływającego okna nakładki.

Obsługiwane formaty

Dowolny format wideo obsługiwany przez natywny odtwarzacz HTML5 przeglądarki:

  • MP4 (H.264 / H.265) — uniwersalnie obsługiwany
  • WebM (VP8 / VP9 / AV1) — obsługiwany w Chrome, Firefox, Edge
  • OGG / OGV (Theora) — obsługiwany w Firefox i Chrome
  • MOV — obsługiwany w Safari; ograniczona obsługa w innych miejscach
  • M4V — obsługiwany w większości przeglądarek opartych na Chromium i Safari

Plik wideo musi być serwowany przez HTTP/HTTPS, a serwer musi zezwalać na żądania cross-origin (CORS), aby przeglądarka mogła go załadować.

Jak to działa

  1. Wprowadzony adres URL jest ładowany jako src standardowego elementu HTML5 <video>.
  2. Po kliknięciu „Uruchom Picture-in-Picture" przeglądarka wywołuje natywny API requestPictureInPicture() na tym elemencie.
  3. Przeglądarka odłącza wideo do pływającego okna zarządzanego przez menedżer okien systemu operacyjnego.
  4. Kliknięcie „Wyjdź z Picture-in-Picture" (lub przycisku zamknięcia na pływającym oknie) wywołuje exitPictureInPicture() i zwraca wideo do odtwarzacza.

Funkcje

  • Uruchomienie i wyjście z PiP jednym kliknięciem bezpośrednio z przeglądarki — nie są potrzebne rozszerzenia
  • Działa z dowolnym publicznie dostępnym bezpośrednim adresem URL wideo
  • Odtwarzacz w formacie 16:9 z pełnymi natywnymi kontrolkami (odtwarzanie, pauza, przewijanie, głośność, pełny ekran)
  • Automatycznie rozpoczyna odtwarzanie przed wejściem w PiP, aby wideo nie było zamrożone
  • Wykrywa, jeśli PiP nie jest obsługiwany w bieżącej przeglądarce i wyświetla jasną wiadomość

Przypadki użycia

  • Oglądaj film instruktażowy w pływającym oknie podczas śledzenia w edytorze kodu lub innej karcie przeglądarki
  • Monitoruj transmisję na żywo lub nagrany kanał wideo podczas pracy w innych aplikacjach
  • Utrzymuj widoczne odniesienie wideo podczas edycji dokumentów, arkuszy kalkulacyjnych lub plików projektowych

Ograniczenia

  • Serwer wideo musi zezwalać na pobieranie pliku z innego źródła (wymagane nagłówki CORS). Wiele sieci CDN i bezpośrednich hostów plików już to robi; niektóre nie.
  • PiP nie jest dostępny we wszystkich przeglądarkach — w szczególności niektóre przeglądarki mobilne i starsze wersje stacjonarne nie obsługują API.
  • Formaty playlist transmisji strumieniowej, takie jak HLS (.m3u8) i DASH (.mpd), nie są obsługiwane bezpośrednio; działają tylko adresy URL pobierania progresywnego.

FAQ

Dlaczego wideo nie ładuje się? Serwer hostujący wideo może nie zawierać nagłówka Access-Control-Allow-Origin, który umożliwia ładowanie cross-origin, lub adres URL może wymagać uwierzytelnienia. Spróbuj bezpośredniego publicznego linku do pliku wideo.

Dlaczego przycisk PiP jest wyłączony? Musisz najpierw załadować wideo, wprowadzając adres URL i klikając „Załaduj wideo". Przycisk staje się aktywny po ustawieniu źródła.

Czy to działa na urządzeniach mobilnych? Picture-in-Picture API ma ograniczoną obsługę w przeglądarkach mobilnych. Na iOS Safari obsługuje PiP dla filmów, ale zachowanie może się różnić. Na Androidzie Chrome może go obsługiwać w zależności od wersji i ustawień systemu operacyjnego.