PICTURE IN PICTURE API

Picture in Picture (PiP) merupakan istilah yang populer dalam dunia broadcast dan komputasi yang merujuk ke mode “layar dalam layar”. Biasanya, ini digunakan dalam situasi di mana satu layar menampilkan konten video, sedangkan layar yang lebih kecil menunjukkan konten lain (contohnya, saat menonton video YouTube sambil menjelajahi situs lain).

Untungnya, teknologi web modern sekarang memungkinkan kita untuk mengimplementasikan fungsi ini di dalam situs web kita dengan menggunakan Picture in Picture (PiP) API. Dalam tutorial ini, kita akan fokus pada penggunaan PiP API di JavaScript.

Fitur dasar Picture in Picture (PiP) API

PiP API tersedia di banyak browser modern, memungkinkan pengguna mengontrol video Picture in Picture pada halaman web. Bisa dibilang ini adalah tambahan yang kuat untuk Media API yang ada di JavaScript.

Secara ringkas, PiP API memungkinkan kamu:

1. Membuka video dalam mode Picture in Picture.
2. Mengendalikan video tersebut (pause, play, stop, dll).
3. Mendapatkan informasi tentang status video tersebut (apakah sedang diputar, apakah dalam mode PiP, dll).

Implementasi

Berikut adalah contoh kodingan untuk memanfaatkan PiP API dalam JavaScript.

let video = document.querySelector('video');

video.addEventListener('enterpictureinpicture', function() {
    console.log('Video berada dalam mode Picture in Picture');
}, false);

video.addEventListener('leavepictureinpicture', function() {
    console.log('Video telah meninggalkan mode Picture in Picture');
}, false);

let pipButton = document.getElementById('pipButton');

pipButton.addEventListener('click', function() {
    if (document.pictureInPictureElement) {
        document.exitPictureInPicture();
    } else {
        video.requestPictureInPicture();
    }
}, false);

Dalam kode di atas, kita pertama mengambil elemen video menggunakan querySelector. Kemudian kita mendengarkan dua acara (enterpictureinpicture and leavepictureinpicture) yang dipicu ketika video memasuki atau meninggalkan mode PiP. Kemudian kita membuat tombol yang mengaktifkan atau menonaktifkan mode PiP menggunakan fungsi requestPictureInPicture dan exitPictureInPicture.

Mari kita lihat lebih detail apa yang terjadi dalam kode di atas.

Menggunakan requestPictureInPicture

Untuk memasukkan video dalam mode Picture in Picture, kita menggunakan method requestPictureInPicture yang ada pada elemen video. Metode ini mengembalikan promise dan memicu event enterpictureinpicture saat berhasil.

Menggunakan exitPictureInPicture

Sebaliknya, untuk keluar dari mode Picture in Picture, kita menggunakan method exitPictureInPicture yang ada pada objek document. Metode ini juga mengembalikan promise dan memicu event leavepictureinpicture saat berhasil.

Menangani event

Kita juga dapat mendengarkan event enterpictureinpicture dan leavepictureinpicture, yang memungkinkan kita melakukan aksi sesuai kebutuhan saat video memasuki atau meninggalkan mode PiP.

Itulah sekilas tentang Picture in Picture API dalam JavaScript. Selamat mencoba dan membuat pengalaman menonton video yang lebih interaktif dan menarik untuk pengguna situs webmu!