Przyszłość funkcji obraz w obrazie

François Beaufort

Przed wprowadzeniem interfejsu Document Picture-in-Picture API w oknie Picture-in-Picture można było umieścić tylko element HTML <video>. Ten nowy interfejs API umożliwia otwieranie okna zawsze widocznego na górze, które można wypełnić dowolnymi treściami HTML. Jest ona dostępna jako wersja próbna origin od wersji Chrome 111 na komputery.

Okno obrazu w obrazie utworzone za pomocą interfejsu Document Picture-in-Picture API (demo).

Nowy interfejs API oferuje znacznie więcej niż istniejący interfejs Picture-in-Picture API dla <video>. Możesz na przykład udostępnić niestandardowe elementy sterujące i dane wejściowe (np. napisy, playlisty, suwak czasu, możliwość polubienia lub nie filmów), aby ulepszyć działanie odtwarzacza wideo w trybie obrazu w obrazie.

Dzięki pełnemu dokumentowi w trybie obrazu w obrazie aplikacje internetowe do rozmów wideo mogą łączyć wiele strumieni wideo w jednym oknie obrazu w obrazie bez konieczności korzystania z hacków na potrzeby obrazu. Mogą też korzystać z funkcji niestandardowych, takich jak wysyłanie wiadomości, wyciszanie innego użytkownika czy podnoszenie ręki.

Ten fragment kodu pokazuje, jak włączyć tryb obrazu w obrazie w przypadku niestandardowego odtwarzacza wideo.

async function togglePictureInPicture() {
  // Close Picture-in-Picture window if any.
  if (documentPictureInPicture.window) {
    documentPictureInPicture.window.close();
    return;
  }

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow({
    initialAspectRatio: 640 / 360,
    copyStyleSheets: true,
  });

  // Move video to the Picture-in-Picture window.
  const video = document.querySelector("#video");
  pipWindow.document.body.append(video);

  // Listen for the PiP closing event to move the video back.
  pipWindow.addEventListener("unload", (event) => {
    const videoContainer = document.querySelector("#videoContainer");
    const pipVideo = event.target.querySelector("#video");
    videoContainer.append(pipVideo);
  });
}

Aby dowiedzieć się więcej, zapoznaj się z artykułem Picture-in-Picture (obraz w oknie) dla dowolnego elementu, a nie tylko <video>.

Na tym etapie opinie deweloperów są bardzo ważne, dlatego przesyłajcie problemy na GitHub, dodając sugestie i pytania.