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 yang memutar video cuplikan Sintel.](https://developer.chrome.com/static/blog/the-future-of-picture-in-picture/image/a-picture-picture-window-457c5c468d28f.png?authuser=0000&hl=id)
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.