Przyszłość funkcji obraz w obrazie

François Beaufort

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

Nowy interfejs API zapewnia znacznie więcej niż dotychczasowy interfejs Picture-in-Picture API dla <video>. Możesz na przykład udostępnić niestandardowe elementy sterujące i dane wejściowe (takie jak napisy, playlisty, pasek czasu odtwarzania, oznaczenie filmu jako „Podoba mi się” i „To mi się nie podoba”), aby zwiększyć wygodę użytkowników korzystających z funkcji wyświetlania obrazu w obrazie.

Dzięki funkcji „Dokument w obrazie w obrazie” aplikacje internetowe do rozmów wideo mogą łączyć kilka strumieni wideo w jedno okno, w którym nie trzeba korzystać z funkcji Canvas. Mogą też udostępniać niestandardowe elementy sterujące, takie jak wysyłanie wiadomości, wyciszanie innych użytkowników czy podniesienie ręki.

Poniższy fragment kodu 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, skorzystaj z funkcji Obraz w obrazie dla dowolnego elementu, a nie tylko dla <video>.

Opinie deweloperów są na tym etapie bardzo ważne, dlatego zachęcamy do zgłaszania problemów na GitHubie wraz z sugestiami i pytaniami.

Baner powitalny: Jakob Owens.