Picture-in-Picture (PiP)

François Beaufort

Sejak April 2017, Chrome untuk Android O mendukung Picture-in-Picture. Fitur ini memungkinkan pengguna memutar elemen <video> di jendela overlay kecil yang tidak diblokir oleh jendela lain, sehingga mereka dapat menonton sambil melakukan hal lain.

Berikut cara kerjanya: buka Chrome, buka situs yang berisi video, lalu putar dalam layar penuh. Dari sana, tekan tombol Beranda untuk membuka Layar Utama Android dan video yang sedang diputar akan otomatis bertransisi ke Picture-in-Picture. Selesai. Keren, kan?

Ya, tetapi bagaimana dengan desktop? Bagaimana jika situs ingin mengontrol pengalaman tersebut?

Kabar baiknya adalah spesifikasi Picture-in-Picture Web API sedang dibuat drafnya seperti saat ini. 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.
• Mengizinkan situs memicu Picture-in-Picture pada elemen video melalui gestur pengguna.
• Mengizinkan situs keluar dari Picture-in-Picture.
• Mengizinkan situs memeriksa apakah Picture-in-Picture dapat dipicu.

Dan tampilannya mungkin seperti ini:

<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

Jadi, bagaimana menurut Anda? Kirimkan masukan Anda dan ajukan masalah di repositori WICG Picture-in-Picture. Kami ingin mengetahui pendapat Anda.

Mencegah perilaku PIP default Android

Saat ini, Anda dapat mencegah video menggunakan perilaku PiP default Android di Chrome dengan merespons peristiwa pengubahan ukuran, dan mendeteksi saat ukuran jendela telah berubah secara signifikan (lihat kode di bawah). Tindakan ini tidak direkomendasikan sebagai solusi permanen, tetapi memberikan opsi sementara hingga Web API diterapkan.

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