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 bir kayan pencere (picture-in-picture pencere) açmasına olanak tanır.

Bu API, videoyu PiP penceresinde izlemeye devam etmenizi sağlayan <video> için Resim İçinde Resim API'sinin üzerine kuruludur.

Document PiP API, herhangi bir HTML içeriğini görüntüleyebildiğinden heyecan verici yeni kullanım alanları keşfetmek için kullanabilirsiniz.

Tarayıcı desteği ve aşamalı geliştirme

Belgede Resim İçinde Resim API'si şu anda sınırlı sayıda kullanıcıya sunulmaktadır.

Ancak bu, kademeli iyileştirme veya sağlıklı düşüş ile kullanmanızı engellemez.

Kullanım alanınızı planlarken standart bir özellik yerine aşamalı bir iyileştirme olarak ele alın. Bu makalede, sorunsuz azaltma örneği gösterilmektedir.

Document PiP API ile kullanıcının deneyimini iyileştirme

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

Aşağıdaki ekran kaydı, uygulamanın düzenini gösterir. Ekran iki sütuna bölünmüştür. İlk sütunda kod düzenleyici bulunur. İkinci sütunda sekmeli bir düzen bulunur. 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 Pencere İçinde Pencere API'si için destek eklemek için mükemmel bir fırsattır.

Bunu uygulamak için tarayıcınızın desteğini kontrol edin:

const isPipSupported = "documentPictureInPicture" in window;

Artık bu değişkeni kullanarak documentPictureInPicture çağrılarını sarmalayabilir veya Document PiP'yi kullanan bir işlevden erken dönebilirsiniz. Aşağıdaki kod, belge PiP'nin desteklenip desteklenmediğini kontrol eder ve ardından bir belge 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 herhangi bir genişlik ve yükseklik belirtebilirsiniz. Belirli bir öğeyi, geçerli dokümanı eşleştirmeyi deneyebilir veya sabit değerler sağlayabilirsiniz.

Şu ana kadar boş bir belgeniz var. Artık bu sayfayı 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 büyüt düğmeniz var.Tarayıcı önizleme sekmesini büyütmenin yanı sıra harici monitörünüz varsa sekmeyi ayrı bir ekrana taşıyabilir, hatta ana web uygulamasını ve tarayıcı önizleme sekmesini sütun düzeninde yeniden düzenleyebilirsiniz.

Yedek

Bu API'nin kullanılabilirliğinin sınırlı olduğunu unutmayın. Bu API'nin desteklenmediği tarayıcılarda ve cihazlarda yedek (sorunsuz düşüş) davranışı sağlamanız gerekir.

Genişlet düğmesinin, tarayıcı önizleme sekmesinin tamamını 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, en büyük/en küçük düğmesinin ipucu Pencere içinde pencereye gir ve Pencere içinde pencereden çık arasında geçiş yapar. Öte yandan, isPipSupported false olduğunda yedek davranış En üst düzeye çıkar ve En aza indir ile açıklanır.

Gördüğünüz gibi, Belge Resim İçinde Resim API'si, progresif iyileştirme veya sorunsuz düşüş 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 sınırlamasına izin vermeyin ve iyi bir yedek kullanım alanı belirlemeyi unutmayın.

Bu API'nin çeşitli örneklerini ve kullanım alanlarını keşfetmek için Document PiP belgelerine göz atın.