Masa depan Picture-in-Picture

François Beaufort

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

Jendela Picture-in-Picture dibuat dengan Document Picture-in-Picture API (demo).

API baru menyediakan lebih dari yang tersedia dari Picture-in-Picture API untuk <video> yang 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 Dokumen dalam mode Picture-in-Picture, aplikasi web konferensi video dapat menggabungkan beberapa streaming video menjadi satu jendela Picture-in-Picture tanpa harus mengandalkan tips kanvas. Setelan ini juga dapat memberikan kontrol kustom seperti mengirim pesan, membisukan audio pengguna lain, atau mengangkat tangan.

Cuplikan kode berikut menunjukkan cara mengalihkan 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 pun, bukan hanya <video> untuk mengetahui informasi selengkapnya.

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

Banner besar oleh Jakob Owens.