Sejak April 2017, Chrome untuk Android O mendukung Picture-in-Picture.
Hal ini memungkinkan pengguna memutar elemen <video> di jendela overlay kecil yang tidak
diblokir oleh jendela lain, sehingga mereka dapat melihat sambil melakukan hal lain.
Berikut cara kerjanya: buka Chrome, buka situs yang berisi video, lalu putar dalam layar penuh. Dari sana, tekan tombol Layar Utama untuk membuka Layar Utama Android, dan pemutaran video akan otomatis ditransisikan ke Picture-in-Picture. Itu saja! Keren, kan?
Begitulah, tetapi, bagaimana dengan {i>desktop<i}? Bagaimana jika situs web itu ingin mengontrol pengalaman itu?
Kabar baiknya adalah spesifikasi Picture-in-Picture Web API sedang disusun saat kita berbicara. Spesifikasi ini bertujuan untuk memungkinkan situs memulai dan mengontrol perilaku ini dengan mengekspos kumpulan properti berikut ke API:
- Memberi tahu situs saat video memasuki dan keluar dari mode Picture-in-Picture.
- Izinkan situs memicu Picture-in-Picture pada elemen video melalui gestur pengguna.
- Izinkan situs keluar dari Picture-in-Picture.
- Izinkan situs memeriksa apakah Picture-in-Picture dapat dipicu.
Dan beginilah tampilannya:
<video id="video" src="https://example.com/file.mp4"></video>
<button id="pipButton"></button>
<script>
// Hide button if Picture-in-Picture is not supported.
pipButton.hidden = !document.pictureInPictureEnabled;
pipButton.addEventListener('click', function() {
// If there is no element in Picture-in-Picture yet, let's request Picture
// In Picture for the video, otherwise leave it.
if (!document.pictureInPictureElement) {
video.requestPictureInPicture()
.catch(error => {
// Video failed to enter Picture-in-Picture mode.
});
} else {
document.exitPictureInPicture()
.catch(error => {
// Video failed to leave Picture-in-Picture mode.
});
}
});
</script>
Masukan
Bagaimana menurut Anda? Kirimkan masukan Anda dan sampaikan masalah di repositori WICG Picture-in-Picture. Kami ingin mendengar pendapat Anda!
Mencegah perilaku PIP default Android
Saat ini, Anda dapat mencegah video agar tidak menggunakan perilaku PiP default Android di Chrome dengan merespons peristiwa perubahan ukuran, dan mendeteksi kapan ukuran jendela berubah secara signifikan (lihat kode di bawah). Hal ini tidak direkomendasikan sebagai solusi permanen, tetapi memberikan opsi sementara hingga Web API diimplementasikan.
// See whether resize is small enough to be PiP. It's a hack, but it'll
// work for now.
window.addEventListener('resize', function() {
if (!document.fullscreenElement) {
return;
}
var minimumScreenSize = 0.33;
var screenArea = screen.width * screen.height;
var windowArea = window.outerHeight * window.outerWidth;
// If the size of the window relative to the screen is less than a third,
// let's assume we're in PiP and exit fullscreen to prevent Auto PiP.
if ((windowArea / screenArea) < minimumScreenSize) {
document.exitFullscreen();
}
});