Funkcja obraz w obrazie dla dowolnego elementu, nie tylko dla <filmu&g;

François Beaufort

Interfejs Document Picture-in-Picture API umożliwia otwieranie okna, które jest zawsze na wierzchu i może zawierać dowolną treść HTML. Rozszerza on istniejący interfejs Picture-in-Picture API dla <video>, który umożliwia umieszczenie w oknie Obraz w obrazie tylko elementu HTML <video>.

Okno obrazu w obrazie w interfejsie Document Picture-in-Picture API jest podobne do pustego okna tej samej domeny otwartego za pomocą window.open(), ale ma pewne różnice:

• Okno obrazu w obrazie będzie pływać nad innymi oknami.
• Okno obrazu w obrazie nigdy nie jest aktywne dłużej niż okno otwierające.
• Nie można poruszać się po oknie obrazu w obrazie.
• Witryna nie może ustawić pozycji okna obrazu w obrazie.

Obecny stan,

Przypadki użycia

Niestandardowy odtwarzacz wideo

Witryna może udostępniać wideo w trybie obraz w obrazie za pomocą obecnego interfejsu Picture-in-Picture API dla <video>, ale jest on bardzo ograniczony. Obecne okno obrazu w obrazie akceptuje niewiele danych wejściowych i ma ograniczone możliwości stylizacji. Gdy dokument jest wyświetlany w trybie obrazu w obrazie, witryna może udostępniać niestandardowe elementy sterujące i dane wejściowe (np. napisy, playlisty, suwak czasu, opcje polubienia i odrzucenia filmów), aby poprawić komfort oglądania filmów w tym trybie.

Wideokonferencje

Użytkownicy często opuszczają kartę przeglądarki podczas sesji wideokonferencyjnej z różnych powodów (np. aby zaprezentować inną kartę lub wykonywać wiele zadań jednocześnie), ale nadal chcą widzieć połączenie. Jest to więc idealny przypadek użycia funkcji obraz w obrazie. Obecnie możliwości, jakie strona do wideokonferencji może zapewnić za pomocą interfejsu Picture-in-Picture API dla <video>, są ograniczone pod względem stylu i danych wejściowych. Dzięki pełnemu dokumentowi w trybie obrazu w obrazie witryna może łatwo łączyć wiele strumieni wideo w jedno okno PiP bez konieczności korzystania z obejść opartych na elemencie canvas i udostępniać niestandardowe elementy sterujące, takie jak wysyłanie wiadomości, wyciszanie innego użytkownika czy podnoszenie ręki.

Produktywność

Badania wykazały, że użytkownicy potrzebują więcej sposobów na zwiększenie produktywności w internecie. Dokument w trybie obraz w obrazie zapewnia aplikacjom internetowym większą elastyczność. Niezależnie od tego, czy chodzi o edytowanie tekstu, robienie notatek, listy zadań, wiadomości i czaty czy narzędzia do projektowania i programowania, aplikacje internetowe mogą teraz sprawić, że ich treści będą zawsze dostępne.

Interfejs

Właściwości

documentPictureInPicture.window

Zwraca bieżące okno obrazu w obrazie, jeśli takie istnieje. W przeciwnym razie zwraca wartość null.

Metody

documentPictureInPicture.requestWindow(options)

Zwraca obietnicę, która jest spełniana po otwarciu okna obrazu w obrazie. Obietnica jest odrzucana, jeśli wywołano ją bez gestu użytkownika. Słownik options zawiera te opcjonalne elementy:

width

Ustawia początkową szerokość okna obrazu w obrazie.

height

Ustawia początkową wysokość okna obrazu w obrazie.

disallowReturnToOpener

Ukrywa przycisk „Wróć do karty” w oknie Obraz w obrazie, jeśli ma wartość true. Domyślnie ma wartość fałsz.

preferInitialWindowPlacement

Otwórz okno obrazu w obrazie w domyślnym położeniu i rozmiarze, jeśli wartość jest prawdziwa. Domyślnie ma wartość fałsz.

Wydarzenia

documentPictureInPicture.onenter

WywoływanedocumentPictureInPicture, gdy otworzy się okno obrazu w obrazie.

Przykłady

Poniższy kod HTML konfiguruje niestandardowy odtwarzacz wideo i element przycisku, który otwiera odtwarzacz wideo w oknie obrazu w obrazie.

<div id="playerContainer">   <div id="player">     <video id="video"></video>   </div> </div> <button id="pipButton">Open Picture-in-Picture window</button> 

Otwieranie okna obrazu w obrazie

Poniższy kod JavaScript wywołuje funkcję documentPictureInPicture.requestWindow(), gdy użytkownik kliknie przycisk, aby otworzyć puste okno obrazu w obrazie. Zwrócona obietnica jest realizowana za pomocą obiektu JavaScript okna funkcji obraz w obrazie. Odtwarzacz wideo jest przenoszony do tego okna za pomocą funkcji append().

pipButton.addEventListener('click', async () => {   const player = document.querySelector("#player");    // Open a Picture-in-Picture window.   const pipWindow = await documentPictureInPicture.requestWindow();    // Move the player to the Picture-in-Picture window.   pipWindow.document.body.append(player); }); 

Ustawianie rozmiaru okna obrazu w obrazie

Aby ustawić rozmiar okna obrazu w obrazie, ustaw opcje width i height elementu documentPictureInPicture.requestWindow() na żądany rozmiar okna obrazu w obrazie. Chrome może ograniczyć wartości opcji, jeśli są one zbyt duże lub zbyt małe, aby zmieścić się w oknie o przyjaznym dla użytkownika rozmiarze.

pipButton.addEventListener("click", async () => {   const player = document.querySelector("#player");    // Open a Picture-in-Picture window whose size is   // the same as the player's.   const pipWindow = await documentPictureInPicture.requestWindow({     width: player.clientWidth,     height: player.clientHeight,   });    // Move the player to the Picture-in-Picture window.   pipWindow.document.body.append(player); }); 

Ukrywanie przycisku „Wróć do karty” w oknie obrazu w obrazie

Aby ukryć w oknie obrazu w obrazie przycisk, który umożliwia użytkownikowi powrót do karty otwierającej, ustaw opcję disallowReturnToOpener parametru documentPictureInPicture.requestWindow() na true.

pipButton.addEventListener("click", async () => {   // Open a Picture-in-Picture window which hides the "back to tab" button.   const pipWindow = await documentPictureInPicture.requestWindow({     disallowReturnToOpener: true,   }); }); 

Otwieranie okna obrazu w obrazie w domyślnej pozycji i rozmiarze

Aby nie używać ponownie położenia ani rozmiaru poprzedniego okna obrazu w obrazie, ustaw opcję preferInitialWindowPlacement w documentPictureInPicture.requestWindow() na true.

pipButton.addEventListener("click", async () => {   // Open a Picture-in-Picture window in its default position / size.   const pipWindow = await documentPictureInPicture.requestWindow({     preferInitialWindowPlacement: true,   }); }); 

Kopiowanie arkuszy stylów do okna obrazu w obrazie

Aby skopiować wszystkie arkusze stylów CSS z okna źródłowego, przejdź w pętli przez arkusze styleSheets wyraźnie połączone z dokumentem lub w nim osadzone i dołącz je do okna obrazu w obrazie. Pamiętaj, że jest to kopia jednorazowa.

pipButton.addEventListener("click", async () => {   const player = document.querySelector("#player");    // Open a Picture-in-Picture window.   const pipWindow = await documentPictureInPicture.requestWindow();    // Copy style sheets over from the initial document   // so that the player looks the same.   [...document.styleSheets].forEach((styleSheet) => {     try {       const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');       const style = document.createElement('style');        style.textContent = cssRules;       pipWindow.document.head.appendChild(style);     } catch (e) {       const link = document.createElement('link');        link.rel = 'stylesheet';       link.type = styleSheet.type;       link.media = styleSheet.media;       link.href = styleSheet.href;       pipWindow.document.head.appendChild(link);     }   });    // Move the player to the Picture-in-Picture window.   pipWindow.document.body.append(player); }); 

Obsługa zamykania okna obrazu w obrazie

Nasłuchuj zdarzenia "pagehide" okna, aby wiedzieć, kiedy okno obrazu w obrazie zostanie zamknięte (z inicjatywy witryny lub przez użytkownika). Obsługa zdarzeń to dobre miejsce na przywrócenie elementów z okna obrazu w obrazie, jak pokazano tutaj.

pipButton.addEventListener("click", async () => {   const player = document.querySelector("#player");    // Open a Picture-in-Picture window.   const pipWindow = await documentPictureInPicture.requestWindow();    // Move the player to the Picture-in-Picture window.   pipWindow.document.body.append(player);    // Move the player back when the Picture-in-Picture window closes.   pipWindow.addEventListener("pagehide", (event) => {     const playerContainer = document.querySelector("#playerContainer");     const pipPlayer = event.target.querySelector("#player");     playerContainer.append(pipPlayer);   }); }); 

Zamknij okno obrazu w obrazie programowo za pomocą metody close().

// Close the Picture-in-Picture window programmatically.  // The "pagehide" event will fire normally. pipWindow.close(); 

Odsłuchiwanie momentu, w którym witryna włącza obraz w obrazie

Nasłuchuj zdarzenia "enter" w obiekcie documentPictureInPicture, aby wiedzieć, kiedy otworzy się okno obrazu w obrazie. Wydarzenie zawiera obiekt window, który umożliwia dostęp do okna z obrazem w obrazie.

documentPictureInPicture.addEventListener("enter", (event) => {   const pipWindow = event.window; }); 

Dostęp do elementów w oknie obrazu w obrazie

Dostęp do elementów w oknie obrazu w obrazie można uzyskać za pomocą obiektu zwróconego przez documentPictureInPicture.requestWindow() lub za pomocą documentPictureInPicture.window, jak pokazano poniżej.

const pipWindow = documentPictureInPicture.window; if (pipWindow) {   // Mute video playing in the Picture-in-Picture window.   const pipVideo = pipWindow.document.querySelector("#video");   pipVideo.muted = true; } 

Obsługa zdarzeń z okna obrazu w obrazie

Twórz przyciski i elementy sterujące oraz reaguj na zdarzenia wejściowe użytkownika, takie jak "click", tak jak zwykle w JavaScript.

// Add a "mute" button to the Picture-in-Picture window. const pipMuteButton = pipWindow.document.createElement("button"); pipMuteButton.textContent = "Mute"; pipMuteButton.addEventListener("click", () => {    const pipVideo = pipWindow.document.querySelector("#video");   pipVideo.muted = true; }); pipWindow.document.body.append(pipMuteButton); 

Zmienianie rozmiaru okna obrazu w obrazie

Aby zmienić rozmiar okna obrazu w obrazie, użyj metod resizeBy() i resizeTo(). Obie metody wymagają gestu użytkownika.

const resizeButton = pipWindow.document.createElement('button'); resizeButton.textContent = 'Resize'; resizeButton.addEventListener('click', () => {   // Expand the Picture-in-Picture window's width by 20px and height by 30px.   pipWindow.resizeBy(20, 30); }); pipWindow.document.body.append(resizeButton); 

Zaznacz okno otwierające

Użyj metody focus() Window, aby zaznaczyć okno otwierające z okna obrazu w obrazie. Ta metoda wymaga gestu użytkownika.

const returnToTabButton = pipWindow.document.createElement("button"); returnToTabButton.textContent = "Return to opener tab"; returnToTabButton.addEventListener("click", () => {   window.focus(); }); pipWindow.document.body.append(returnToTabButton); 

Tryb wyświetlania obrazu w obrazie w CSS

Użyj trybu wyświetlania CSS picture-in-picture, aby napisać konkretne reguły CSS, które są stosowane tylko wtedy, gdy (część) aplikacja internetowa jest wyświetlana w trybie obrazu w obrazie.

@media all and (display-mode: picture-in-picture) {   body {     margin: 0;   }   h1 {     font-size: 0.8em;   } } 

Wykrywanie cech

Aby sprawdzić, czy interfejs Document Picture-in-Picture API jest obsługiwany, użyj tego kodu:

if ('documentPictureInPicture' in window) {   // The Document Picture-in-Picture API is supported. } 

Przykłady

Odtwarzacz VideoJS

Możesz wypróbować interfejs Document Picture-in-Picture API w wersji demonstracyjnej odtwarzacza VideoJS.

Pomodoro

Tomodoro, aplikacja internetowa do techniki pomodoro, również korzysta z interfejsu Document Picture-in-Picture API, gdy jest on dostępny. Zobacz żądanie pull na GitHubie.

Prześlij opinię

Zgłaszaj problemy na GitHubie, podając sugestie i zadając pytania.

Przydatne linki

• Wyjaśnienie publiczne
• Specyfikacja WICG
• Błąd śledzenia w Chromium
• Wpis na ChromeStatus.com
• Komponent Blink: Blink>Media>PictureInPicture
• Sprawdzanie przez TAG
• Zamiar przeprowadzenia eksperymentu
• Zamiar wysłania