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. Web sitesi, tam bir belgeyi Pencere İçinde Pencere'de sunarak kullanıcının Pencere İçinde Pencere video deneyimini iyileştirmek için özel kontroller ve girişler (ör. altyazılar, oynatma listeleri, zaman kaydırma çubuğu, videoları beğenme ve beğenmeme) sağlayabilir.

Video konferans

Kullanıcıların, görüntülü konferans oturumu sırasında çeşitli nedenlerle (ör. görüşmeye başka bir sekme sunmak veya çoklu görev yapmak) tarayıcı sekmesinden ayrılırken görüşmeyi görmeye devam etmek istemesi yaygın bir durumdur. Bu nedenle, Pencere İçinde Pencere özelliği bu tür durumlarda en iyi şekilde kullanılabilir. Yine de, bir video konferans web sitesinin <video> için Pencere İçinde Pencere API'si aracılığıyla sağlayabileceğ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 içinde pencere modunda doküman, web uygulamalarına daha fazlasını yapma esnekliği sunar. Web uygulamaları artık metin düzenleme, not alma, görev listeleri, mesajlaşma ve sohbet ya da tasarım ve geliştirme araçları gibi içeriklere her zaman erişilebilir durumda kalabilir.

Arayüz

Özellikler

documentPictureInPicture.window

Mevcut Pencere İçinde Pencere'yi (varsa) döndürür. Aksi takdirde null döndürülü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 Pencerede Resim 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

Aşağıdaki JavaScript, kullanıcı düğmeyi tıklayıp boş bir Pencere İçinde Pencere penceresi açtığında documentPictureInPicture.requestWindow() işlevini ç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 içinde pencerenin boyutunu ayarlamak için documentPictureInPicture.requestWindow() öğesinin width ve height seçeneklerini istediğiniz pencere içinde 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çma

Önceki pencere içinde pencere öğesinin konumunu veya boyutunu yeniden kullanmak istemiyorsanız documentPictureInPicture.requestWindow() 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 yerleştirilmiş styleSheets öğelerini sırayla inceleyin 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ıldığı veya kullanıcı tarafından manuel olarak kapatıldığı için) öğ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 iç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 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 penceresinden gelen etkinlikleri işleme

Düğmeler ve kontroller oluşturun ve kullanıcının giriş etkinliklerine (ör. "click") normalde JavaScript'te 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 pencereyi yeniden boyutlandırmak için resizeBy() ve resizeTo() Pencere yöntemlerini kullanın. Her iki yöntem için de kullanıcı hareketi gerekir.

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çı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

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ı

Belge Resim İçinde Resim API'si VideoJS oynatıcı demoğrafisiyle oynayabilirsiniz. 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 isteklerini inceleyin.

Görüşlerinizi paylaşın

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