Tüm Öğeler için Pencere İçinde Pencere <video>

François Beaufort

Document Picture-in-Picture API, rastgele HTML içeriğiyle doldurulabilen ve her zaman en üstte olan bir pencere açmayı mümkün kılar. Bu API, yalnızca bir HTML <video> öğesinin pencere içinde pencere penceresine yerleştirilmesine izin veren mevcut <video> için pencere içinde pencere API'sini genişletir.

Document Picture-in-Picture API'deki pencere içinde pencere, window.open() üzerinden açılan boş bir aynı kaynaklı pencereye benzer ancak bazı farklılıklar vardır:

• Pencere içinde pencere penceresi, diğer pencerelerin üzerinde kayar.
• Pencere içinde pencere penceresi, açılış penceresinden daha uzun süre açık kalmaz.
• Pencere içinde pencere penceresinde gezinilemez.
• Pencere içinde pencere konumunu web sitesi ayarlayamaz.

Mevcut durum

Kullanım alanları

Özel video oynatıcı

Bir web sitesi, mevcut <video> için pencere içinde pencere API'si ile pencere içinde pencere video deneyimi sunabilir ancak bu deneyim çok sınırlıdır. Mevcut pencere içinde pencere penceresi az sayıda girişi kabul eder ve bunları stilize etme özelliği sınırlıdır. Pencere içinde pencere özelliğinde tam doküman kullanıldığında web sitesi, kullanıcının pencere içinde pencere video deneyimini iyileştirmek için özel kontroller ve girişler (ör. altyazılar, oynatma listeleri, zaman çubuğu, videoları beğenme ve beğenmeme) sağlayabilir.

Video konferans

Kullanıcılar, görüntülü konferans oturumu sırasında çeşitli nedenlerle (ör. görüşmede başka bir sekme sunma veya çoklu görev) tarayıcı sekmesinden ayrılırken görüşmeyi görmeye devam etmek ister. Bu nedenle, pencere içinde pencere özelliği için önemli bir kullanım alanıdır. Bir kez daha belirtmek isteriz ki, bir video konferans web sitesinin Picture-in-Picture API for <video> aracılığıyla sağlayabileceği mevcut deneyim, stil ve giriş açısından sınırlıdır. Pencere içinde pencere özelliğinde tam belge desteği sayesinde web sitesi, canvas hack'lerine ihtiyaç duymadan birden fazla video akışını tek bir PiP penceresinde kolayca birleştirebilir ve mesaj gönderme, başka bir kullanıcının sesini kapatma veya el kaldırma gibi özel kontroller sağlayabilir.

Verimlilik

Araştırmalar, kullanıcıların web'de daha üretken olabilmek için daha fazla yola ihtiyaç duyduğunu gösteriyor. Pencere içinde pencere modunda doküman özelliği, web uygulamalarına daha fazla iş yapma esnekliği sağlar. İster metin düzenleme, not alma, görev listeleri, mesajlaşma ve sohbet, ister tasarım ve geliştirme araçları olsun, web uygulamaları artık içeriklerine her zaman erişilebilir durumda tutabilir.

Arayüz

Özellikler

documentPictureInPicture.window

Varsa mevcut pencere içinde pencereyi döndürür. Aksi takdirde null değerini döndürür.

Yöntemler

documentPictureInPicture.requestWindow(options)

Pencere içinde pencere penceresi açıldığında çözümlenen bir söz döndürür. Kullanıcı hareketi olmadan çağrılırsa söz reddedilir. options sözlüğü, aşağıdaki isteğe bağlı üyeleri içerir:

width

Pencere içinde pencere penceresinin ilk genişliğini ayarlar.

height

Pencere içinde pencere penceresinin ilk yüksekliğini ayarlar.

disallowReturnToOpener

Doğruysa pencerede "Sekmeye geri dön" düğmesini gizler. Varsayılan olarak false değerindedir.

preferInitialWindowPlacement

Doğruysa pencere içinde pencere penceresini varsayılan konumunda ve boyutunda açın. Varsayılan olarak false değerindedir.

Etkinlikler

documentPictureInPicture.onenter

Pencere içinde pencere açıldığında documentPictureInPicture tetiklenir.

Örnekler

Aşağıdaki HTML, özel bir video oynatıcı ve video oynatıcıyı pencere içinde pencere penceresinde açmak için bir düğme öğesi oluşturur.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

Pencere içinde pencere penceresi açma

Aşağıdaki JavaScript, kullanıcı düğmeyi tıklayarak boş bir resim içinde resim penceresi açtığında documentPictureInPicture.requestWindow() işlevini çağırır. Döndürülen söz, pencere içinde pencere penceresi JavaScript nesnesiyle çözümlenir. Video oynatıcı, append() kullanılarak bu pencereye taşınır.

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Pencere içinde pencere penceresinin boyutunu ayarlama

Pencere içinde pencere boyutunu ayarlamak için documentPictureInPicture.requestWindow() öğesinin width ve height seçeneklerini istediğiniz pencere içinde pencere boyutuna ayarlayın. Chrome, seçenek değerleri kullanıcı dostu bir pencere boyutuna sığamayacak kadar büyük veya küçükse bunları sınırlayabilir.

pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window whose size is
  // the same as the player's.
  const pipWindow = await documentPictureInPicture.requestWindow({
    width: player.clientWidth,
    height: player.clientHeight,
  });

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Pencere içinde pencere penceresinin "sekmeye geri dön" düğmesini gizleme

Kullanıcının açıcı sekmeye geri dönmesini sağlayan düğmeyi resim içinde resim penceresinde gizlemek için disallowReturnToOpener seçeneğini documentPictureInPicture.requestWindow() olarak ayarlayın.true

pipButton.addEventListener("click", async () => {
  // Open a Picture-in-Picture window which hides the "back to tab" button.
  const pipWindow = await documentPictureInPicture.requestWindow({
    disallowReturnToOpener: true,
  });
});

Pencere içinde pencere penceresini varsayılan konumunda ve boyutunda açma

Önceki pencere içinde pencere öğesinin konumunu veya boyutunu yeniden kullanmamak için documentPictureInPicture.requestWindow() seçeneğinin preferInitialWindowPlacement bölümünü true olarak ayarlayın.

pipButton.addEventListener("click", async () => {
  // Open a Picture-in-Picture window in its default position / size.
  const pipWindow = await documentPictureInPicture.requestWindow({
    preferInitialWindowPlacement: true,
  });
});

Stil sayfalarını pencere içinde pencereye kopyalama

Kaynak penceredeki tüm CSS stil sayfalarını kopyalamak için dokümana açıkça bağlanmış veya dokümana yerleştirilmiş styleSheets öğelerini döngüye alın ve bunları pencere içinde pencere penceresine ekleyin. Bu işlemin tek seferlik bir kopyalama olduğunu unutmayın.

pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Copy style sheets over from the initial document
  // so that the player looks the same.
  [...document.styleSheets].forEach((styleSheet) => {
    try {
      const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
      const style = document.createElement('style');

      style.textContent = cssRules;
      pipWindow.document.head.appendChild(style);
    } catch (e) {
      const link = document.createElement('link');

      link.rel = 'stylesheet';
      link.type = styleSheet.type;
      link.media = styleSheet.media;
      link.href = styleSheet.href;
      pipWindow.document.head.appendChild(link);
    }
  });

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Pencere içinde pencere penceresi kapandığında yapılacak işlem

Pencere içinde pencere penceresinin ne zaman kapatıldığını (web sitesi tarafından başlatıldığı veya kullanıcı tarafından manuel olarak kapatıldığı için) öğrenmek için pencere "pagehide" etkinliğini dinleyin. Etkinlik işleyici, öğeleri resim içinde resim penceresinden geri almak için iyi bir yerdir.

pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);

  // Move the player back when the Picture-in-Picture window closes.
  pipWindow.addEventListener("pagehide", (event) => {
    const playerContainer = document.querySelector("#playerContainer");
    const pipPlayer = event.target.querySelector("#player");
    playerContainer.append(pipPlayer);
  });
});

close() yöntemini kullanarak pencere içinde pencere penceresini programatik olarak kapatın.

// Close the Picture-in-Picture window programmatically. 
// The "pagehide" event will fire normally.
pipWindow.close();

Web sitesi pencere içinde pencere moduna girdiğinde dinleme

Pencere içinde pencere özelliği açıldığında bildirim almak için documentPictureInPicture'da "enter" etkinliğini dinleyin. Etkinlik, pencere içinde pencereye erişmek için bir window nesnesi içerir.

documentPictureInPicture.addEventListener("enter", (event) => {
  const pipWindow = event.window;
});

Pencere içinde pencere penceresindeki öğelere erişme

Pencere içinde pencere penceresindeki öğelere documentPictureInPicture.requestWindow() tarafından döndürülen nesneden veya aşağıda gösterildiği gibi documentPictureInPicture.window ile erişin.

const pipWindow = documentPictureInPicture.window;
if (pipWindow) {
  // Mute video playing in the Picture-in-Picture window.
  const pipVideo = pipWindow.document.querySelector("#video");
  pipVideo.muted = true;
}

Pencere içinde pencere penceresindeki etkinlikleri işleme

Düğmeler ve kontroller oluşturun ve kullanıcının giriş etkinliklerine (ör. "click") JavaScript'te normalde yaptığınız gibi yanıt verin.

// Add a "mute" button to the Picture-in-Picture window.
const pipMuteButton = pipWindow.document.createElement("button");
pipMuteButton.textContent = "Mute";
pipMuteButton.addEventListener("click", () => { 
  const pipVideo = pipWindow.document.querySelector("#video");
  pipVideo.muted = true;
});
pipWindow.document.body.append(pipMuteButton);

Pencere içinde pencereyi yeniden boyutlandırma

Pencere içinde pencere penceresini yeniden boyutlandırmak için resizeBy() ve resizeTo() pencere yöntemlerini kullanın. Her iki yöntem de kullanıcı hareketi gerektirir.

const resizeButton = pipWindow.document.createElement('button');
resizeButton.textContent = 'Resize';
resizeButton.addEventListener('click', () => {
  // Expand the Picture-in-Picture window's width by 20px and height by 30px.
  pipWindow.resizeBy(20, 30);
});
pipWindow.document.body.append(resizeButton);

Açıcı penceresine odaklanma

Pencere içinde pencere penceresinden açıcı pencereye odaklanmak için focus() pencere yöntemini kullanın. Bu yöntem için kullanıcı hareketi gerekir.

const returnToTabButton = pipWindow.document.createElement("button");
returnToTabButton.textContent = "Return to opener tab";
returnToTabButton.addEventListener("click", () => {
  window.focus();
});
pipWindow.document.body.append(returnToTabButton);

CSS pencere içinde pencere görüntüleme modu

Web uygulamasının (bir kısmı) resim içinde resim modunda gösterildiğinde uygulanan belirli CSS kuralları yazmak için CSS picture-in-picture görüntüleme modunu kullanın.

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

Özellik algılama

Document Picture-in-Picture API'nin desteklenip desteklenmediğini kontrol etmek için şunu kullanın:

if ('documentPictureInPicture' in window) {
  // The Document Picture-in-Picture API is supported.
}

Demolar

VideoJS oynatıcı

Document Picture-in-Picture API VideoJS oynatıcı demosunu deneyebilirsiniz.

Pomodoro

Bir pomodoro web uygulaması olan Tomodoro da kullanıma sunulduğunda Document Picture-in-Picture API'den yararlanıyor. GitHub pull isteklerini inceleyin.

Görüşlerinizi paylaşın

Öneri ve sorularınızı GitHub'da sorun olarak bildirin.

Faydalı bağlantı

• Herkese açık açıklama
• WICG spesifikasyonu
• Chromium izleme hatası
• ChromeStatus.com girişi
• Blink Bileşeni: Blink>Media>PictureInPicture
• TAG Review
• Deneme Amacı (Intent to Experiment)
• Kargoya verme amacı