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 berdasarkan 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 progressive enhancement

Browser Support

  • Chrome: 116.
  • Edge: 116.
  • Firefox: not supported.
  • Safari: not supported.

Source

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

Namun, hal ini tidak boleh menghentikan Anda menggunakannya dengan progressive enhancement atau degradasi halus.

Saat merencanakan kasus penggunaan, pastikan untuk memperlakukannya sebagai progressive enhancement, bukan fitur standar. Dalam artikel ini, Anda akan melihat contoh degradasi halus.

Meningkatkan pengalaman pengguna peserta didik dengan Document PiP API

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

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

Sebagai siswa, Anda mungkin terkadang ingin memaksimalkan jendela pratinjau browser. Ini adalah kesempatan yang tepat untuk menambahkan dukungan untuk Document Picture-in-Picture API.

Untuk menerapkannya, mulailah dengan memeriksa dukungan browser:

const isPipSupported = "documentPictureInPicture" in window;

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

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 untuk jendela. Anda dapat mencoba mencocokkan elemen tertentu, dokumen saat ini, atau bahkan memberikan nilai tetap.

Sejauh ini, Anda memiliki dokumen kosong. Sekarang Anda perlu mengisinya dengan konten.

// 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

Perlu diingat bahwa API ini memiliki ketersediaan terbatas. Di browser dan perangkat yang tidak mendukung API ini, Anda harus menyediakan perilaku penggantian (degradasi halus).

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

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

Jangan lupa untuk memperhatikan detail kecil di 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 Maximize dan Minimize.

Seperti yang dapat Anda lihat, Document Picture-in-Picture API dapat membuka kasus penggunaan baru yang menarik untuk Aplikasi Web Anda jika digabungkan dengan progressive enhancement atau degradasi halus.

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

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