Dipublikasikan: 18 Maret 2026
Mulai Chrome 142, aplikasi web yang memutar audio atau video dapat otomatis masuk ke mode Picture-in-Picture jika mendaftarkan pengelola tindakan sesi media. Hal ini telah menjadi tambahan yang bagus untuk pemutar musik dan video, tetapi mengharuskan developer menerapkan dukungan secara eksplisit.
Untuk memberikan pengalaman multitasking media yang lancar dan meningkatkan kemampuan penemuan Picture-in-Picture (PiP), Chrome memperkenalkan PiP Otomatis yang dimulai browser. Fitur ini memungkinkan Chrome membuka jendela PiP video secara otomatis untuk situs yang belum mendaftarkan pengendali tindakan sesi media. Tindakan ini memastikan konten media Anda tetap terlihat saat Anda beralih tab.
Petunjuk
- Gunakan Chrome 142 atau versi yang lebih baru di desktop.
- Aktifkan "Browser initiated automatic picture in picture" di
chrome://flags/#browser-initiated-automatic-picture-in-picturedan mulai ulang Chrome. - Buka situs video dan putar video (contoh).
- Beralih ke tab Chrome lain untuk memicu jendela PiP video.
Cara kerjanya
Saat Anda memutar media dan beralih ke tab lain, Chrome dapat otomatis memindahkan media ke jendela PiP video yang selalu berada di atas. Tidak seperti "Fitur PiP Otomatis untuk Pemutaran Media" yang ada, yang mendukung konten video atau HTML arbitrer (menggunakan Document Picture-in-Picture API), permintaan yang dimulai browser selalu membuka jendela PiP video standar.
Untuk memastikan pengalaman pengguna yang berkualitas tinggi dan tidak mengganggu, Chrome memicu perilaku ini hanya jika serangkaian kondisi ketat terpenuhi:
- URL frame atas aman menurut layanan Safe Browsing.
- Media berada di frame atas.
- Media telah terdengar dalam dua detik terakhir.
- Media memiliki fokus audio dan sedang diputar.
- Ada satu pemain "normal", yaitu elemen media yang tidak dibisukan yang telah diputar dan tidak menggunakan
MediaStream. - Elemen media harus memiliki trek video.
- Situs tidak menggunakan kamera atau mikrofon secara aktif.
- Pengguna telah melampaui nilai minimum Indeks Engagement Media, yang menunjukkan penggunaan situs yang sering. Kondisi ini berlaku jika pengguna belum secara eksplisit mengizinkan atau menolak fitur tersebut.
- Saat ini tidak ada jendela PiP yang terbuka. Jika jendela PiP lain sudah terbuka, Chrome tidak akan memicu transisi otomatis.
enterpictureinpicture) dan PiP Otomatis untuk pemutaran media (jika situs telah mendaftarkan handler).Kontrol dan privasi pengguna
PiP Otomatis yang dimulai browser mematuhi izin dan setelan pengguna yang sama dengan permintaan yang dimulai situs. Saat situs pertama kali masuk ke PiP secara otomatis, Chrome akan menampilkan dialog izin kepada pengguna yang menanyakan apakah mereka ingin mengizinkan perilaku ini untuk situs tersebut pada masa mendatang.
Pengguna juga dapat mengelola izin ini kapan saja melalui "Setelan Situs".
Kontrol developer dan memilih tidak ikut serta
Meskipun fitur ini dirancang agar dapat langsung digunakan untuk sebagian besar situs video, Anda dapat memilih untuk tidak menggunakan fitur ini.
Menerapkan pengendali Anda sendiri
Jika aplikasi web Anda sudah mendaftarkan handler tindakan sesi media untuk tindakan enterpictureinpicture, penerapan Anda akan diprioritaskan, dan Chrome tidak akan memulai transisi otomatisnya sendiri.
Jika Anda ingin menyesuaikan perilaku saat Chrome menganggap transisi sudah tepat, handler tindakan enterpictureinpicture menyertakan reason di MediaSessionActionDetails. Anda dapat memeriksa apakah reason adalah contentoccluded (yang berarti browser memulai permintaan karena tab disembunyikan) dan memutuskan cara melanjutkan.
navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
if (details.reason === "contentoccluded") {
// The browser suggests entering Picture-in-Picture.
// You can choose to open a standard video PiP or a Document PiP window, or do
// nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
}
});
Praktik terbaik untuk sesi media
Dengan PiP Otomatis yang dimulai browser, konfigurasi sesi media Anda membantu Chrome memahami dan berinteraksi dengan konten Anda. MediaSession yang dikonfigurasi dengan baik memastikan bahwa jendela PiP memberikan pengalaman berkualitas tinggi dengan kontrol dan informasi yang akurat bagi pengguna.
Menjaga status progres tetap sinkron
Jika setPositionState API digunakan, dan posisi sesi media tidak diperbarui dengan benar, jendela PiP akan menampilkan status progres yang tidak akurat selama pemutaran media. Untuk mencegah hal ini, selalu perbarui atau hapus setelan position state menggunakan navigator.mediaSession.setPositionState() sebagaimana mestinya (misalnya, saat sumber media berubah atau direset), sehingga jendela PiP mencerminkan posisi yang benar untuk media yang diputar.
const video = document.querySelector('video');
function updatePositionState() {
if ('setPositionState' in navigator.mediaSession) {
navigator.mediaSession.setPositionState({
duration: video.duration,
playbackRate: video.playbackRate,
position: video.currentTime,
});
}
}
// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);
Menangani transisi dengan lancar
Jika situs Anda otomatis memutar "Episode Berikutnya", pastikan bahwa MediaSession pengendali tindakan dan metadata Anda tetap aktif dan akurat selama transisi. Jika pengendali tindakan dihapus atau tidak ditetapkan selama transisi ke elemen "Berikutnya", jendela PiP mungkin kehilangan kemampuan yang disediakan oleh pengendali.
Mengaktifkan kontrol penuh
Selain pemutaran dan jeda dasar, pertimbangkan untuk menerapkan pengendali untuk seekto, previoustrack, dan nexttrack. Hal ini memungkinkan pengguna menavigasi konten Anda langsung dari jendela PiP tanpa kembali ke tab asli.
navigator.mediaSession.setActionHandler("seekto", (details) => {
if (details.fastSeek && "fastSeek" in video) {
video.fastSeek(details.seekTime);
return;
}
video.currentTime = details.seekTime;
});
Berinteraksi dan memberikan masukan
Jika Anda memiliki masukan atau mengalami masalah terkait perilaku ini, sampaikan di crbug.com.