Przyszłość funkcji obraz w obrazie

François Beaufort

Przed wprowadzeniem interfejsu Document Picture-in-Picture API element HTML <video> można było umieszczać w oknie obrazu w obrazie. Ten nowy interfejs API umożliwia otwieranie zawsze aktywnego okna, które można wypełnić dowolną treścią HTML. Jest ona dostępna w ramach wersji próbnej origin dostępnej w Chrome 111 na komputerze.

Nowy interfejs API zapewnia znacznie więcej możliwości niż to dostępne w przypadku interfejsu Picture-in-Picture API dla platformy <video>. Na przykład możesz udostępniać niestandardowe elementy sterujące i elementy wejściowe (np. napisy, playlisty, suwak czasu, głosować na tak i „Nie podoba mi się”) w odtwarzaczu obrazu w obrazie.

Dzięki funkcji obrazu w obrazie w pełnym rozmiarze aplikacje internetowe do rozmów wideo mogą łączyć wiele strumieni wideo w jedno okno obrazu w obrazie bez konieczności polegania na aplikacjach typu Canvas. Mogą też udostępniać własne opcje, takie jak wysyłanie wiadomości, wyciszanie innego użytkownika czy podniesienie ręki.

Fragment kodu poniżej pokazuje, jak włączyć obraz w obrazie w niestandardowym odtwarzaczu 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, obejrzyj film o funkcji Obraz w obrazie dla dowolnego elementu, a nie tylko <video>.

Opinie deweloperów są na tym etapie bardzo ważne, więc zgłaszaj problemy na GitHubie, przesyłając sugestie i pytania.

Baner powitalny: Jakob Owens.