Masa depan Picture-in-Picture

François Beaufort

Sebelum Document Picture-in-Picture API, hanya elemen <video> HTML dapat ditempatkan ke jendela Picture-in-Picture. API baru ini memungkinkan untuk membuka jendela yang selalu ada di atas yang dapat diisi dengan konten HTML arbitrer. Alat ini tersedia sebagai uji coba origin mulai Chrome 111 di desktop.

API baru ini menyediakan lebih banyak dari yang tersedia dari Picture-in-Picture API untuk <video> yang sudah ada. Misalnya, Anda dapat memberikan kontrol dan input kustom (misalnya, teks, playlist, scrubber waktu, menyukai dan tidak menyukai video) untuk meningkatkan pengalaman pemutar video Picture-in-Picture pengguna.

Dengan Document in Picture-in-Picture yang lengkap, aplikasi web konferensi video dapat menggabungkan beberapa streaming video menjadi satu jendela Picture-in-Picture tanpa harus mengandalkan peretasan kanvas. Mereka juga dapat menyediakan kontrol khusus seperti mengirim pesan, membisukan audio pengguna lain, atau mengangkat tangan.

Cuplikan kode berikut menunjukkan cara mengaktifkan/menonaktifkan Picture-in-Picture untuk pemutar video kustom.

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);
  });
}

Lihat Picture-in-Picture untuk Elemen apa saja, bukan hanya <video> untuk informasi selengkapnya.

Masukan developer sangat penting pada tahap ini, jadi harap laporkan masalah di GitHub dengan saran dan pertanyaan.

Banner besar oleh Jakob Owens.