Masuk ke mode picture-in-picture secara otomatis saat memutar media

François Beaufort
François Beaufort

Dipublikasikan: 5 Februari 2025

Mulai Chrome 120, aplikasi web konferensi video dapat otomatis membuka jendela picture-in-picture saat pengguna beralih fokus dari tab saat ini. Fitur ini berguna bagi presenter yang ingin melihat dan berinteraksi dengan peserta secara real time saat mempresentasikan dokumen atau menggunakan tab atau jendela lain. Lihat Picture-in-picture otomatis untuk aplikasi web konferensi video untuk mengetahui detailnya.

Mulai Chrome 134, aplikasi web yang memutar audio atau video dapat otomatis masuk ke mode picture-in-picture. Artinya, pemutar musik dan video di web kini dapat beralih dengan lancar ke jendela pemutar mini saat pengguna beralih tab, sehingga tidak perlu aktivasi manual.

Jendela picture-in-picture dibuka dan ditutup secara otomatis saat pengguna Spotify beralih tab.

Untuk mendukung kasus penggunaan pemutaran media ini, mulai Chrome 134, aplikasi web desktop dapat otomatis masuk ke mode picture-in-picture, dengan beberapa batasan untuk memastikan pengalaman pengguna yang positif. Aplikasi web hanya memenuhi syarat untuk picture-in-picture otomatis untuk pemutaran media jika memenuhi semua kondisi berikut:

  • URL frame atas aman menurut layanan Safe Browsing.

  • Media berada di bingkai atas.

  • Media dapat didengar dalam dua detik terakhir.

  • Media memiliki fokus audio.

  • Media sedang diputar.

  • Pengendali tindakan sesi media untuk tindakan "enterpictureinpicture" telah terdaftar.

  • Batas Indeks Engagement Media pengguna telah terlampaui, yang menunjukkan bahwa pengguna sering menggunakan media di aplikasi web ini. Hal ini berlaku jika setelan browser pengguna adalah "Dapat meminta untuk masuk ke mode picture-in-picture". Jika pengguna secara eksplisit mengizinkan aplikasi web untuk memasuki mode picture-in-picture, kondisi ini tidak berlaku.

Setelan picture-in-picture otomatis di panel informasi situs browser Chrome.
Setelan picture-in-picture otomatis di panel informasi situs browser Chrome.

Bug 386193409 melacak penerapan kondisi kemunculan untuk mempermudah proses debug dan implementasi.

Perhatikan bahwa jika jendela picture-in-picture lain sudah terbuka, Chrome tidak akan memicu picture-in-picture otomatis. Aturan ini tidak berlaku jika jendela picture-in-picture yang ada dibuka secara otomatis dan akan ditutup.

Jika aplikasi web memenuhi persyaratan, beralih fokus ke tab lain akan memicu fungsi callback pengendali tindakan sesi media untuk tindakan "enterpictureinpicture". Hal ini memungkinkan aplikasi web membuka jendela picture-in-picture tanpa gestur pengguna. Pengguna kemudian akan melihat dialog izin, yang menanyakan apakah mereka ingin mengizinkan situs untuk masuk ke mode picture-in-picture secara otomatis setiap kali, hanya kali ini, atau tidak pernah.

Overlay izin di jendela picture-in-picture yang menanyakan kepada pengguna apakah mereka ingin mengizinkan situs masuk ke mode picture-in-picture secara otomatis.
Pengguna ditanya apakah masuk ke mode picture-in-picture secara otomatis diizinkan.

Anda dapat menggunakan Picture-in-Picture API untuk <video> untuk membuka jendela picture-in-picture dari elemen <video> HTML, atau Document Picture-in-Picture API untuk membuka jendela yang selalu berada di atas untuk diisi dengan konten HTML arbitrer. Jendela picture-in-picture tidak difokuskan saat dibuka dan otomatis ditutup saat halaman terlihat lagi.

Contoh berikut menunjukkan cara memutar elemen <video> HTML saat pengguna mengklik tombol. Kemudian, daftarkan pengendali tindakan sesi media dengan aman untuk tindakan "enterpictureinpicture" dengan fungsi callback yang membuka jendela picture-in-picture. Jendela ini berisi video dengan Picture-in-Picture API untuk <video>.

const video = document.querySelector("video");

async function onPlayButtonClick() {
  // Play video.
  await video.play();
}

try {
  // Request video to automatically enter picture-in-picture when eligible.
  navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
    await video.requestPictureInPicture();
  });
} catch (error) {
  console.log("The enterpictureinpicture action is not yet supported.");
}

Coba demo pemutar VideoJS yang menampilkan Document Picture-in-Picture API atau mainkan dengan contoh Video Media Session dan Audio Media Session.

Berinteraksi dan memberikan masukan

Jika memiliki masukan atau mengalami masalah, Anda dapat membagikannya di crbug.com.

Resource

Ucapan terima kasih

Terima kasih kepada Benjamin Keen dan Frank Liberato atas ulasan mereka.