Document Picture-in-Picture API ile heyecan verici kullanım alanlarından yararlanın

Jad Joubran

Yayınlanma tarihi: 4 Mart 2025

Document Picture-in-Picture API (Document PiP API), web uygulamalarının herhangi bir HTML içeriğini görüntüleyebilen, her zaman en üstte olan kayan bir pencere (resim içinde resim penceresi) açmasına olanak tanır.

Bu API, <video> için resim içinde resim API'sinin üzerine kurulmuştur. Bu API, video izlemeye resim içinde resim penceresinde devam etmenizi sağlar.

Document PiP API, rastgele HTML içeriklerini gösterebildiğinden bu API'yi kullanarak heyecan verici yeni kullanım alanları keşfedebilirsiniz.

Tarayıcı desteği ve progresif geliştirme

Bu makalenin yazıldığı sırada, Document Picture-in-Picture API'nin kullanılabilirliği sınırlıydı.

Ancak bu durum, progresif geliştirme veya kontrollü azalma ile kullanmanızı engellememelidir.

Kullanım alanınızı planlarken standart bir özellikten ziyade progresif geliştirme olarak ele aldığınızdan emin olun. Bu makalede, kontrollü azalma örneğini göreceksiniz.

Document PiP API ile öğrenenlerin kullanıcı deneyimini iyileştirme

LearnHTMLCSS.online, semantik ve erişilebilir HTML ile CSS'yi öğreten etkileşimli bir öğrenme platformudur. Etkileşimli bir metin düzenleyici ve tarayıcı önizleme penceresi sunar.

Aşağıdaki ekran kaydında uygulamanın düzeni gösterilmektedir. Ekran iki sütuna bölünmüştür. İlk sütunda kod düzenleyici bulunur. İkinci sütunda sekmeli bir düzen var. Kullanıcı, varsayılan olarak yarışmanın talimatlarını görebilir ve canlı önizlemeyi görüntülemek için Tarayıcı sekmesini tıklayabilir.

Öğrenci olarak bazen tarayıcı önizleme penceresini büyütmek isteyebilirsiniz. Bu, Document Picture-in-Picture API'si için destek eklemek üzere mükemmel bir fırsattır.

Bu özelliği uygulamak için öncelikle tarayıcı desteğini kontrol edin:

const isPipSupported = "documentPictureInPicture" in window;

Artık bu değişkeni kullanarak tüm documentPictureInPicture çağrılarını sarmalayabilir veya Doküman PiP'e dayalı bir işlevden erken dönüş yapabilirsiniz. Aşağıdaki kod, Doküman PiP'in desteklenip desteklenmediğini kontrol eder ve ardından bir Doküman PiP penceresi açar.

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

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

Kullanım alanınıza bağlı olarak pencere için istediğiniz genişliği ve yüksekliği belirtebilirsiniz. Belirli bir öğeyi, mevcut dokümanı eşleştirmeyi veya sabit değerler sağlamayı deneyebilirsiniz.

Şu ana kadar boş bir dokümanınız var. Şimdi bu alanı içerikle doldurmanız gerekiyor.

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

CSS koduyla ilgili sorunlar için CSS'yi de senkronize etmeniz gerekir.

İşte bu kadar. Artık ayrı bir PiP penceresinde açılan bir ekranı kaplama düğmesi var.Tarayıcı önizleme sekmesini büyütmenin yanı sıra, harici bir monitörünüz varsa bu sekmeyi ayrı bir ekrana taşıyabilir, hatta ana web uygulamasını ve tarayıcı önizleme sekmesini sütun düzeninde yeniden düzenleyebilirsiniz.

Fallback

Bu API'nin sınırlı sayıda kullanılabilirliğe sahip olduğunu unutmayın. Bu API'nin desteklenmediği tarayıcılarda ve cihazlarda, yedek (kontrollü azalma) davranış sağlamanız gerekir.

Büyütme düğmesinin tüm tarayıcı önizleme sekmesini dışarı çekmesi yerine, mevcut web uygulamasının kalan tüm alanını kaplamasını sağlayabiliriz.

Bu davranışı farklı tarayıcılarda deneyin: https://learnhtmlcss.online/app.html?id=2096

İpuçlarındaki küçük ayrıntılara dikkat etmeyi unutmayın. isPipSupported, true olduğunda, ekranı kaplama/küçültme düğmesinin ipucu Pencere içinde pencereye girin ve Pencere içinde pencereden çıkın arasında geçiş yapar. Öte yandan, isPipSupported, false olduğunda yedek davranış Ekranı kapla ve Küçült ile açıklanır.

Gördüğünüz gibi, Belge Pencere İçinde Pencere API'si, progresif geliştirme veya kontrollü azalma ile birlikte kullanıldığında web uygulamanız için heyecan verici yeni kullanım alanları sunabilir.

Sınırlı tarayıcı desteğinin sizi kısıtlamasına izin vermeyin ve uygun bir yedek kullanım alanı oluşturmayı unutmayın.

Bu API'nin çeşitli örneklerini ve kullanım alanlarını incelemek için Belge PiP'i ile ilgili dokümanlara göz atın.