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 zawsze znajduje się na wierzchu i może być wypełnione dowolną treścią HTML. Rozszerza on istniejący interfejs Picture-in-Picture API dla <video>, który pozwala umieszczać w oknie Obraz w obrazie tylko element HTML <video>.

Okno obrazu w obrazie w interfejsie Document Picture-in-Picture API jest podobne do pustego okna tego samego pochodzenia, które zostało otwarte za pomocą window.open(), ale różni się od niego w kilku aspektach:

• Okno obrazu w obrazie będzie się unosić nad innymi oknami.
• Okno obrazu w obrazie nigdy nie jest dłuższe 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 wyświetlać filmy w trybie obrazu w obrazie za pomocą istniejącego interfejsu Picture-in-Picture API dla <video>, ale jest to bardzo ograniczone. Obecne okno Obraz w obrazie obsługuje niewiele danych wejściowych i ma ograniczone możliwości stylizacji. W ramach pełnego dokumentu w trybie obrazu w obrazie witryna może udostępniać niestandardowe elementy sterujące i dane wejściowe (np. napisy, playlisty, suwak czasu, możliwość polubienia lub nie filmów), aby ulepszyć wrażenia użytkownika związane z odtwarzaniem filmów w trybie obrazu w obrazie.

Wideokonferencje

Podczas konferencji wideo użytkownicy często opuszczają kartę przeglądarki z różnych powodów (np. aby wyświetlić inną kartę lub wykonywać wiele zadań jednocześnie), ale nadal chcą widzieć rozmowę. Jest to główne zastosowanie okna typu obraz w obrazie. Ponownie przypominamy, że obecne możliwości witryny do wideokonferencji w ramach 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 jednym oknie PiP bez konieczności korzystania z hacków na potrzeby obrazu w obrazie i udostępniać 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. Dokumenty w trybie obrazu w obrazie dają aplikacjom internetowym większą elastyczność, dzięki której mogą osiągnąć więcej. Aplikacje internetowe mogą teraz zapewniać stały dostęp do treści, niezależnie od tego, czy chodzi o edycję tekstu, tworzenie notatek, listy zadań, wiadomości i czat, czy też narzędzia do projektowania i tworzenia.

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 zostanie spełniona po otwarciu okna obrazu w obrazie. Obietnica jest odrzucana, jeśli zostanie wywołana bez działania 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 obrazu w obrazie, jeśli wartość to prawda. Domyślnie ma wartość fałsz.

preferInitialWindowPlacement

Jeśli to prawda, otwórz okno obrazu w obrazie w domyślnej pozycji i rozmiarze. Domyślnie ma wartość fałsz.

Wydarzenia

documentPictureInPicture.onenter

Wywoływany w documentPictureInPicture, gdy otwierane jest okno obrazu w obrazie.

Przykłady

Poniższy kod HTML konfiguruje niestandardowy odtwarzacz wideo i element przycisku, który otwiera odtwarzacz 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

Gdy użytkownik kliknie przycisk, aby otworzyć puste okno obrazu w obrazie, wywołuje się następujący kod JavaScript documentPictureInPicture.requestWindow(). Zwracana obietnica rozwiązuje się z obiektem JavaScript okna Picture-in-Picture. Odtwarzacz wideo jest przenoszony do tego okna za pomocą 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 w documentPictureInPicture.requestWindow() na żądany rozmiar okna obrazu w obrazie. Jeśli wartości opcji są za duże lub za małe, aby pasowały do przyjaznego dla użytkownika rozmiaru okna, Chrome może je przyciąć.

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 Obraz w obrazie

Aby ukryć w oknie obrazu w oknie opcję umożliwiającą użytkownikowi powrót do karty, dla której otwiera się okno, ustaw opcję disallowReturnToOpener w elementzie 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,
  });
});

Otwórz okno 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 pochodzącego okna, przejdź przez styleSheets wyraźnie połączone lub osadzone w dokumencie i dodaj 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 sytuacji, gdy okno obrazu w obrazie jest zamykane

Aby dowiedzieć się, kiedy okno obrazu w obrazie zostało zamknięte (czy to z powodu działania witryny, czy też dlatego, że użytkownik zamknął je ręcznie), odsłuchaj zdarzenia window "pagehide". Obsługa zdarzenia to dobre miejsce do przywracania elementów z okna obrazu w oknie, 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 funkcji obraz w obrazie za pomocą metody close().

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

Posłuchaj, jak witryna przechodzi w tryb obrazu w obrazie

Nasłuchuj zdarzenia "enter" w komponencie documentPictureInPicture, aby wiedzieć, kiedy otwiera 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

Do elementów w oknie Obraz w obrazie możesz uzyskać dostęp za pomocą obiektu zwróconego przez funkcję documentPictureInPicture.requestWindow() lub za pomocą funkcji 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 w zwykłym kodzie 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 funkcji obraz w obrazie, użyj metod resizeBy() i resizeTo(). Obie metody wymagają działania 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

Aby ustawić okno otwierające jako okno główne okna z obrazem w obrazie, użyj metody focus(). Ta metoda wymaga działania 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 aplikacja internetowa (lub jej część) 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:

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

Prezentacje

Odtwarzacz VideoJS

Możesz zapoznać się z dokumentem Demo odtwarzacza VideoJS API. Sprawdź kod źródłowy.

Pomodoro

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

Prześlij opinię

Zgłoś problemy na GitHubie, aby przesłać sugestie i pytania.

Przydatne linki

• Publiczny film wyjaśniający
• Specyfikacja WICG
• Błąd śledzenia w Chromium
• Wpis na stronie ChromeStatus.com
• Składnik Blink: Blink>Media>PictureInPicture
• Sprawdzanie tagów
• Zamierzasz przeprowadzić eksperyment
• Intencja dostawy