Dapatkan kasus penggunaan yang menarik dengan Document Picture-in-Picture API

Jad Joubran

Dipublikasikan: 4 Maret 2025

Document Picture-in-Picture API (Document PiP API) memungkinkan aplikasi web membuka jendela mengambang yang selalu berada di atas (jendela picture-in-picture) yang dapat menampilkan konten HTML arbitrer.

API ini dibuat di atas Picture-in-Picture API untuk <video>, yang memungkinkan Anda terus menonton video di jendela PiP.

Karena Document PiP API dapat menampilkan konten HTML arbitrer, Anda dapat menggunakannya untuk membuka kasus penggunaan baru yang menarik.

Dukungan browser dan peningkatan progresif

Pada saat penulisan, Document Picture-in-Picture API memiliki ketersediaan terbatas.

Namun, hal ini tidak akan menghentikan Anda menggunakannya dengan progressive enhancement atau graceful degradation.

Saat merencanakan kasus penggunaan, pastikan untuk memperlakukannya sebagai peningkatan progresif, bukan fitur standar. Dalam artikel ini, Anda akan melihat contoh penurunan kualitas yang baik.

Meningkatkan pengalaman pengguna peserta didik dengan Document PiP API

LearnHTMLCSS.online adalah platform pembelajaran interaktif yang mengajarkan HTML dan CSS semantik dan mudah diakses. Alat ini menawarkan editor teks interaktif dan jendela pratinjau browser.

Screencast berikut menunjukkan tata letak aplikasi; layar dibagi menjadi dua kolom. Kolom pertama berisi editor kode. Kolom kedua berisi tata letak bertab. Secara default, pengguna dapat melihat petunjuk tantangan, dan mereka dapat mengklik tab Browser untuk melihat pratinjau langsung.

Sebagai siswa, terkadang Anda ingin memaksimalkan jendela pratinjau browser. Ini adalah peluang sempurna untuk menambahkan dukungan bagi Document Picture-in-Picture API.

Untuk mengimplementasikannya, mulailah dengan memeriksa dukungan browser:

const isPipSupported = "documentPictureInPicture" in window;

Sekarang Anda dapat menggunakan variabel ini untuk membungkus panggilan documentPictureInPicture, atau untuk keluar lebih awal dari fungsi yang mengandalkan PiP Dokumen. Kode berikut memeriksa dukungan PiP Dokumen, lalu membuka jendela PiP Dokumen.

async function initDocumentPip() {
  if (!isPipSupported) {
    return false;
  }

  const pipWindow = await documentPictureInPicture.requestWindow({
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

Bergantung pada kasus penggunaan, Anda dapat menentukan lebar dan tinggi jendela. Anda dapat mencoba mencocokkan elemen tertentu, dokumen saat ini, atau bahkan memberikan nilai tetap.

Sejauh ini, Anda memiliki dokumen kosong. Sekarang Anda perlu mengisi kontennya.

// htmlCode is the HTML code of the challenge
pipWindow.document.documentElement.innerHTML = htmlCode;

Untuk masalah terkait kode CSS, Anda juga harus menyinkronkan CSS.

Selesai! Sekarang Anda memiliki tombol maksimalkan yang terbuka di jendela PiP terpisah.Selain memaksimalkan tab pratinjau browser, Anda juga dapat memindahkannya ke layar terpisah jika memiliki monitor eksternal, atau bahkan mengatur ulang aplikasi web utama dan tab pratinjau browser dalam tata letak kolom.

Pengganti

Ingatlah bahwa API ini memiliki ketersediaan terbatas. Di browser dan perangkat yang tidak mendukung API ini, Anda harus menyediakan perilaku penggantian (penurunan kualitas yang baik).

Daripada membuat tombol maksimalkan menarik seluruh tab pratinjau browser keluar, kita dapat membuatnya menempati semua ruang yang tersisa di aplikasi web saat ini.

Coba perilaku ini di browser yang berbeda: https://learnhtmlcss.online/app.html?id=2096

Jangan lupa untuk memperhatikan detail kecil dalam tooltip. Jika isPipSupported adalah true, tooltip tombol maksimalkan/minimalkan akan beralih antara Masuk ke Picture-in-Picture dan Keluar dari Picture-in-Picture. Di sisi lain, jika isPipSupported adalah false, perilaku penggantian dijelaskan dengan Maksimalkan dan Minimalkan.

Seperti yang dapat Anda lihat, Document Picture-in-Picture API dapat membuka kasus penggunaan baru yang menarik untuk Aplikasi Web Anda jika dikombinasikan dengan peningkatan progresif atau penurunan kualitas yang baik.

Jangan biarkan dukungan browser yang terbatas membatasi Anda, dan jangan lupa untuk memiliki kasus penggunaan penggantian yang layak.

Lihat dokumentasi untuk PiP Dokumen guna mempelajari berbagai contoh dan kasus penggunaan API ini.