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 rastgele HTML içeriğini görüntüleyebilen, kayan ve her zaman en üstte olan bir pencere (resim içinde resim penceresi) açmasına olanak tanır.

Bu API, Resim İçinde Resim API'si <video> üzerine kurulmuştur. Bu API, videoyu PiP penceresinde izlemeye 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 aşamalı geliştirme

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

Ancak bu durum, ilerleyici geliştirme veya kademeli bozulma ile kullanmanızı engellememelidir.

Kullanım alanınızı planlarken bunu standart bir özellikten ziyade aşamalı bir geliştirme olarak ele aldığınızdan emin olun. Bu makalede, sorunsuz hizmetten düşürme örneği gösterilmektedir.

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 bulunur. Varsayılan olarak, kullanıcı 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.

Bunu 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 Document PiP'ye dayalı bir işlevden erken dönüş yapabilirsiniz. Aşağıdaki kod, Document PiP'nin desteklenip desteklenmediğini kontrol eder ve ardından Document PiP penceresini 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 ekranı kaplamanın yanı sıra, harici bir monitörünüz varsa ayrı bir ekrana da taşıyabilir veya ana web uygulaması ile tarayıcı önizleme sekmesini sütun düzeninde yeniden düzenleyebilirsiniz.

Yedek

Bu API'nin sınırlı kullanılabilirliğe sahip olduğunu unutmayın. Bu API'nin desteklenmediği tarayıcılar ve cihazlarda geri dönüş (kademeli olarak işlevselliği azaltma) 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. Diğer yandan, isPipSupported false olduğunda yedek davranış Maksimum ve Minimum ile açıklanır.

Gördüğünüz gibi, Doküman Resim İçinde Resim API'si, progresif geliştirme veya zarif bozulma 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 Doküman PiP'i ile ilgili dokümanlara göz atın.