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

Jad Joubran

Dipublikasikan: 4 Maret 2025

The 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 menggunakan 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

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

Namun, hal ini tidak boleh menghentikan Anda untuk 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 pelajar dengan Document PiP API

LearnHTMLCSS.online adalah platform pembelajaran interaktif yang mengajarkan HTML dan CSS semantik dan dapat diakses. Platform 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, Anda mungkin terkadang 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;

Anda kini dapat menggunakan variabel ini untuk menggabungkan panggilan documentPictureInPicture, atau untuk kembali lebih awal dari fungsi yang mengandalkan Document PiP. 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 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 dokumen tersebut dengan konten.

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

Untuk tantangan dengan kode CSS, Anda juga perlu menyinkronkan CSS.

Selesai! Anda kini 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 pengganti (degradasi halus).

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

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

Jangan lupa perhatikan detail kecil di tooltip. Jika isPipSupported adalah true, tooltip tombol maksimalkan/minimalkan akan beralih antara Enter Picture-in-Picture dan Exit Picture-in-Picture. Di sisi lain, jika isPipSupported adalah false, perilaku pengganti akan 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 dikombinasikan dengan progressive enhancement atau degradasi halus.

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

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