Document Picture-in-Picture API ile Web Widget Oluşturma

Document Picture-in-Picture API (DPIP), tarayıcının resim-resim-içinde (PiP) özelliğini HTML ve JavaScript ile kontrol etmene olanak tanıyor. Yani sadece video değil, istediğin HTML içeriğini ayrı bir pencereye taşıyabilirsin.

Temel fikir şu: bir DPIP penceresi açarsın, sonra o pencereye HTML, CSS ve JavaScript kodu yüklersin. Böylece kullanıcı ana sayfayla etkileşim halindeyken, yan tarafta bağımsız bir widget çalışabilir. Örneğin not defteri, sohbet paneli, müzik oynatıcı ya da canlı veri göstergesi gibi.

Pratik olarak, CSS-Tricks'teki bu rehberde adım adım gösterildiği gibi, önce DPIP penceresi için izin istiyorsun, sonra `documentPictureInPicture.requestWindow()` ile pencereyi açarsın. Ardından `document.createElement()` ile oluşturduğun HTML öğelerini o pencerenin `document` nesnesine ekliyorsun.

Bu yaklaşımın avantajı, penceredeki kod ana sayfadan tamamen izole çalışması. CSS çatışması yok, JavaScript kodu birbirini bozmaz. Ayrıca pencere kapatılıncaya kadar durum bellekte kalabiliyor.

Tarayıcı desteği henüz sınırlı (Chromium tabanlı tarayıcılar), ama standart olma yolunda. Eğer interaktif widget'lar yapıyorsan ve kullanıcıya esneklik vermek istiyorsan, bu API'nin potansiyeli ciddi.