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

François Beaufort

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

Document Picture-in-Picture API'deki pencere içinde pencere penceresi, window.open() aracılığıyla açılan boş bir aynı kaynak penceresine benzer ancak bazı farklılıklar vardır:

• Pencere içinde pencere penceresi diğer pencerelerin üzerinde kayar.
• Pencere içinde pencere penceresi, açılan pencereden hiçbir zaman daha uzun süre açık kalmaz.
• Pencere içinde pencere penceresinde gezinilemez.
• Pencere içinde pencere penceresinin konumu web sitesi tarafından ayarlanamaz.

Mevcut durum

Kullanım alanları

Özel video oynatıcı

Web siteleri, mevcut <video> için Pencere İçinde Pencere API'si ile Pencere İçinde Pencere video deneyimi sunabilir ancak bu deneyim çok sınırlıdır. Mevcut pencere içinde pencere penceresi çok az giriş kabul eder ve bu girişlere stil uygulama özelliği sınırlıdır. Tam Pencere İçinde Pencere özelliği olan web sitesi, kullanıcının Pencere İçinde Pencere deneyimini iyileştirmek için özel kontroller ve girişler (örneğin altyazılar, oynatma listeleri, zaman işaretçisi, videoları beğenme ve beğenmeme) sağlayabilir.

Video konferans

Kullanıcıların bir video konferans oturumu sırasında aramayı görmek isterken çeşitli nedenlerle (ör. görüşmeye başka bir sekme gösterme veya çoklu görev gerçekleştirme) tarayıcı sekmesinden ayrılmaları yaygın bir durumdur. Bu nedenle, Pencere İçinde Pencere özelliğinin en önemli kullanım alanıdır. Bir video konferans web sitesinin <video> için Pencere İçinde Pencere API'si aracılığıyla sunabileceği mevcut deneyim, stil ve giriş açısından sınırlıdır. Pencere içinde pencere özelliğiyle, web sitesi tuval hilelerine başvurmak zorunda kalmadan 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 sunabilir.

Verimlilik

Araştırmalar, kullanıcıların web'de üretken olmak için daha fazla yönteme ihtiyaç duyduğunu gösteriyor. Pencere İçinde Pencere, web uygulamalarına daha fazlasını gerçekleştirme esnekliği sağlar. Konu ister metin düzenleme, not alma, görev listeleri, mesajlaşma ve sohbet, ister tasarım ve geliştirme araçları olsun, artık web uygulamaları içeriklerinin her zaman erişilebilir olmasını sağlayabiliyor.

Arayüz

Özellikler

documentPictureInPicture.window

Varsa geçerli Pencere İçinde Pencere penceresini 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ülen bir promise döndürür. Söz, kullanıcı hareketi olmadan çağrılırsa reddedilir. options sözlüğü, isteğe bağlı olarak aşağıdaki üyeleri içerir:

width

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

height

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

disallowReturnToOpener

Doğruysa Pencere İçinde Pencere penceresindeki "sekmeye dön" düğmesini gizler. Varsayılan olarak yanlıştır.

preferInitialWindowPlacement

Doğruysa Pencere içinde pencere penceresini varsayılan konumunda ve boyutunda açın. Varsayılan olarak yanlıştır.

Etkinlikler

documentPictureInPicture.onenter

Pencere içinde pencere penceresi açıldığında documentPictureInPicture etkinleştirilir.

Örnekler

Aşağıdaki HTML, özel bir video oynatıcı ve video oynatıcıyı Pencere İç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

Kullanıcı boş bir Pencere İçinde Pencere penceresi açmak için düğmeyi tıkladığında aşağıdaki JavaScript kodu documentPictureInPicture.requestWindow() öğesini çağırır. Döndürülen söz, Pencere İçinde Pencere JavaScript nesnesi ile çözülür. 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 pencerenin boyutunu ayarlama

Pencere İçinde Pencere penceresinin boyutunu ayarlamak için documentPictureInPicture.requestWindow() öğesinin width ve height seçeneklerini istenen Pencere İçinde Pencere pencere boyutuna ayarlayın. Chrome, kullanıcı dostu bir pencere boyutuna sığmayacak kadar büyük veya küçük olan seçenek değerlerini sabitleyebilir.

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 dön" düğmesini gizleme

Resim İçinde Resim penceresindeki, kullanıcının açıcı sekmesine geri dönmesine olanak tanıyan düğmeyi gizlemek için documentPictureInPicture.requestWindow() disallowReturnToOpener seçeneğ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,
  });
});

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

Önceki Pencere içinde pencerenin konumunu veya boyutunu yeniden kullanmak istemiyorsanız documentPictureInPicture.requestWindow()'teki preferInitialWindowPlacement seçeneğini 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 pencereden tüm CSS stil sayfalarını kopyalamak için dokümana açıkça bağlanmış veya dokümana yerleştirilmiş styleSheets döngüsünü uygulayın ve bunları Pencere İçinde Pencere penceresine ekleyin. Bu işlemin tek seferlik 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 işlem yapma

Pencere içinde pencere penceresinin ne zaman kapandığını (web sitesi tarafından başlatılması veya kullanıcının manuel olarak kapatması nedeniyle) ne zaman kapandığını öğrenmek için pencere "pagehide" etkinliğini dinleyin. Etkinlik işleyici, öğeleri burada gösterildiği gibi Pencere İçinde Pencere 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 İçinde Pencere moduna girdiğinde dinleme

Pencere içinde pencere penceresinin ne zaman açıldığını öğrenmek için documentPictureInPicture'da "enter" etkinliğini dinleyin. Etkinlik, Pencere içinde pencere penceresine 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 İçinde Pencere penceresindeki öğelere, documentPictureInPicture.requestWindow() tarafından döndürülen nesneden veya aşağıda gösterildiği gibi documentPictureInPicture.window kullanarak 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 penceresinden gelen etkinlikleri işleme

JavaScript'te normalde yaptığınız gibi düğmeler ve kontroller oluşturun ve kullanıcının "click" gibi giriş etkinliklerine 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 pencere penceresini yeniden boyutlandırma

Pencere içinde pencereyi 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ı pencereye odaklanma

Pencere içinde pencere penceresinden açan 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

Yalnızca web uygulaması (veya bir kısmı) Pencere İçinde Pencere 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:

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. Kaynak koduna göz atmayı unutmayın.

Pomodoro

Pomodoro web uygulaması olan Tomodoro, kullanılabildiği durumlarda Doküman Resim İçinde Resim API'sinden de yararlanır. GitHub pull isteğini inceleyin.

Görüşlerinizi paylaşın

Öneriler ve sorularla sorunları GitHub'da 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 İncelemesi
• Deneme yapma niyeti
• Gönderim Amacı