Dalam versi 69, ekstensi PictureInPicture telah muncul, yang memungkinkan Anda untuk menampilkan video di atas semua jendela. Saya memutuskan untuk menguji fitur ini dan membagikan hasilnya.
Saya segera menemukan contoh, tetapi tombol picture-in-picture untuk beralih ke mode Picture-in-Picture (selanjutnya PiP) tidak tersedia, saya pergi untuk memeriksa flag
chrome: // flags / # enable-picture-in-picture , nilainya “Default”, untuk bendera ini sama dengan "Diaktifkan", tetapi masih mencoba untuk mengaktifkannya secara manual.
Itu tidak membantu, ternyata kami membutuhkan bendera
chrome lain
: // flags / # enable-surfaces-for-videos , nilai "Default" untuk itu setara dengan "Dinonaktifkan".
Dihidupkan dan diterima. Mereka juga menulis bahwa perlu untuk mengaktifkan fitur flag # enable-eksperimental-platform-web, tetapi itu berhasil tanpa saya.
Contoh
Mari kita membuat contoh sederhana, tag <video />, tombol untuk menghidupkan / mematikan mode PiP, memproses peristiwa PiP yang tersedia.
<html> <head> <title>Chrome 69</title> </head> <body> <video width="320" height="240" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> <br/> <button> PiP</button> <script> const video = document.querySelector('video'); const button = document.querySelector('button'); if (!document.pictureInPictureEnabled) { button.textContent = ' PiP .'; button.disabled = true; } button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } else { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); } }); video.addEventListener('enterpictureinpicture', () => { button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { button.textContent = ' PiP'; }); </script> </body> </html>
Periksa ketersediaan mode:
if (document.pictureInPictureEnabled){
Sederhana, jika properti itu ada, ia mengembalikan benar atau salah.
Kami membuat permintaan untuk memulai mode:
button.addEventListener('click', () => { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); });
Jika izin diperoleh, maka jalankan tangkapan sebaliknya. Permintaan pasti akan ditolak jika tidak dipicu oleh acara pengguna.
Setelah memulai document.pictureInPictureElement akan mengembalikan elemen <video /> kami.
Untuk keluar dari mode, Anda dapat mengklik tanda silang di sudut kanan atas di jendela PiP.
Anda dapat membuat output secara terprogram:
button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } });
Setelah keluar dari document.pictureInPictureElement, itu akan mengembalikan nol lagi.
Acara PiP
Tersedia dua acara, mode PiP hidup dan mati, masing-masing:
video.addEventListener('enterpictureinpicture', () => { // button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { // button.textContent = ' PiP'; });
Ringkasan
Saat ini, mode ini hanya berfungsi dengan tag <video />, tetapi dapat diperluas.
Jendela PiP muncul di sudut kanan bawah, sejauh ini kami tidak dapat memengaruhinya.
Mode PiP tidak kompatibel dengan mode layar penuh, atau satu atau yang lain, yang cukup logis.
Hanya ada satu jendela PiP pada suatu waktu.
Tab di mana pengguna telah mengaktifkan mode PiP ditunjukkan oleh ikon (terlihat pada KDPV).
UPD : API baru adalah divisi W3C yang disebut WICG (Web Platform Incubator Community Group).
Dengan menggunakan API ini, situs dapat mengontrol kapan membuka dan menutup jendela PiP, membuat tombol sendiri untuk manajemen dan mengumpulkan statistik saat pengguna menggunakan PiP.
Beberapa browser sudah mendukung fitur ini, tetapi tidak didasarkan pada W3C
(Misalnya, Opera dan Yandex.Browser).
Firefox dan Edge belum mengumumkan implementasi API baru.