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 (PiP) penceresine yerleştirilmesine izin veren mevcut Picture-in-Picture API for <video>'nin kapsamını genişletir.

Document Picture-in-Picture API'deki pencere içinde pencere penceresi, window.open() kullanılarak 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 gezinilemiyor.
• Pencere içinde pencere konumunu web sitesi ayarlayamaz.

Durum

Kullanım alanları

Bu API'yi özel video oynatıcılar, video konferans ve üretkenlik uygulamaları gibi çeşitli şekillerde kullanabilirsiniz.

Ö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 PiP penceresi az sayıda girişi kabul eder ve bunları stilize etme özelliği sınırlıdır. Resim içinde resim modunda tam bir dokümanla, web sitesi kullanıcının PiP 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, video konferans oturumu sırasında tarayıcı sekmesini genellikle geçici olarak terk eder. Örneğin, görüşmede başka bir sekmeden sunum yaparken, not alırken veya diğer çoklu görev etkinliklerini gerçekleştirirken. Ancak çoğu durumda kullanıcılar aramayı görmeye devam etmek ister. Bu nedenle, pencere içinde pencere özelliği için ideal bir kullanım alanıdır. Bir kez daha belirtmek isteriz ki, bir video konferans web sitesinin <video> için resim içinde resim API'si ile sağlayabileceği mevcut deneyim, stil ve giriş açısından sınırlıdır. Pencere içinde pencere özelliğinde tam bir dokümanla, web sitesi canvas hack'lerine güvenmeden 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ğerini alır.

preferInitialWindowPlacement

Doğruysa pencere içinde pencere özelliğini varsayılan konumunda ve boyutunda açar. Varsayılan olarak false değerine ayarlanır.

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 çağrıları, 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 penceresinin boyutunu ayarlamak için documentPictureInPicture.requestWindow() seçeneğinin width ve height ayarlarını ideal PiP pencere boyutuna getirin. Chrome, seçenek değerleri kullanıcı dostu bir pencere boyutuna sığamayacak kadar büyük veya küçükse bu değerleri azaltabilir.

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);
});

PiP penceresinde "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 documentPictureInPicture.requestWindow() seçeneğinin disallowReturnToOpener özelliğini true olarak ayarlayın.

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

PiP'i varsayılan konum ve boyutta 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ı PiP'ye 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);
});

PIP 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 sitesinin PiP moduna girdiğini dinleme

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

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

PiP penceresindeki öğelere erişme

documentPictureInPicture.requestWindow() tarafından döndürülen nesneden veya documentPictureInPicture.window ile resim içinde resim penceresindeki öğelere 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;
}

PiP penceresindeki etkinlikleri işleme

Düğmeler ve kontroller oluşturun ve kullanıcının giriş etkinliklerine (ör. "click") her zaman olduğu gibi JavaScript ile 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);

PIP penceresini 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 PiP 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ı: VideoJS oynatıcı demosu ile belge içinde belge API'sini kullanarak oynatın.
• Bir pomodoro web uygulaması olan Tomodoro, kullanılabilir olduğunda Document Picture-in-Picture API'den yararlanır. 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çıklayıcı
• 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ı