Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

François Beaufort

Tarayıcı Desteği

Document Picture-in-Picture API (Belge İçinde Pencere API'si), rastgele HTML içeriğiyle doldurulabilen her zaman açık pencerenin açılmasını sağlar. Yalnızca 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 İçinde Pencere penceresi, bazı farklılıklar dışında window.open() üzerinden açılan boş bir aynı kaynak penceresine benzer:

Pencere İçinde Pencere penceresi, diğer pencerelerin üzerinde yer alır.
Pencere İçinde Pencere penceresi, hiçbir zaman açılış penceresinden sonra bitmez.
Pencere içinde pencere penceresine gidilemiyor.
Pencere içinde pencere pencere konumu web sitesi tarafından ayarlanamaz.

ziyaret edin.

Sintel'in fragman videosunu oynatan pencere içinde pencere. — Document Picture-in-Picture API (Pencere İçinde Pencere API'si) ile oluşturulmuş bir Pencere İçinde Pencere penceresi (demo).

Mevcut durum

Step	Durum
1. Açıklayıcı oluşturun	Tamamlandı
2. İlk spesifikasyon taslağını oluşturun	Devam ediyor
3. Geri bildirim toplama tasarımı yineleyin	Devam ediyor
4. Kaynak denemesi	Tamamlandı
5. Başlat	Tamamlandı (Masaüstü)

Kullanım alanları

Özel video oynatıcı

Web siteleri, mevcut <video> için Pencere İçinde Pencere API'sini kullanarak pencere içinde pencere deneyimi sağlayabilir ancak bu özellik çok sınırlıdır. Mevcut Pencere İçinde Pencere penceresine az sayıda giriş kabul edilir ve bu girişlerin stil özelliklerini ayarlama yeteneğ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ği için en iyi kullanım alanı budur. 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. Tam Pencere İçinde Pencere özelliği sayesinde web sitesi, kanvas korsanlığıyla uğraşmak zorunda kalmadan birden fazla video akışını tek bir PiP penceresinde kolayca birleştirebilir ve mesaj gönderme, başka bir kullanıcıyı yoksayma ya da söz isteme gibi özel kontroller sağlayabilir.

Verimlilik

Araştırmalar, kullanıcıların web'de üretken olmak için daha çok 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 İçinde Pencere penceresi açıldığında çözülecek bir söz döndürür. Vaat, kullanıcı hareketi olmadan çağrılırsa reddedilir. options sözlüğü aşağıdaki isteğe bağlı üyeleri içerir:

width: Pencere İçinde Pencere penceresinin ilk genişliğini ayarlar.
height: Pencere İçinde Pencere penceresinin başlangıç yüksekliğini ayarlar.
disallowReturnToOpener: "Sekmeye geri dön" seçeneğini gizler düğmesini tıklayın. Varsayılan olarak yanlıştır.

Etkinlikler

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

Örnekler

Aşağıdaki HTML, video oynatıcıyı Pencere İçinde Pencere penceresinde açmak için özel bir video oynatıcı ve 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 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 taahhüt, bir Pencere İçinde Pencere 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 İçinde Pencere penceresinin 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 çok küçükse seçenek değerlerini sınırlandırabilir.

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

"Sekmeye geri dön" öğesini gizleme Pencere İçinde Pencere düğmesi

Kullanıcının pencere içinde pencere penceresindeki düğmeyi gizlemek için documentPictureInPicture.requestWindow() öğesinin 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,
  });
});

Stil sayfalarını Pencere İçinde Pencere penceresine 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. Bunun tek seferlik bir kopya 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);
});

Not: copyStyleSheets seçeneği, spesifikasyonun önceki bir sürümünde destekleniyordu. Bu durum artık böyle değil.

Pencere içinde pencere kapandığında işleme

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, aşağıda gösterildiği gibi öğeleri Pencere İçinde Pencere penceresinden geri getirmek 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 İç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 İçinde Pencere penceresinin ne zaman açıldığını öğrenmek için documentPictureInPicture cihazında "enter" etkinliğini dinleyin. Etkinlik, Pencere İçinde Pencere penceresine erişmek için bir window nesnesi içerir.

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

Pencere İç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;
}

Etkinlikleri Pencere İçinde Pencere penceresinden yönetme

Düğmeler ve denetimler oluşturun ve normalde JavaScript'te yaptığınız gibi "click" gibi kullanıcının 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 İç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çılış penceresini odaklayın

Pencere İçinde Pencere penceresinden açılan pencereyi odaklamak 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ı Pencere İçinde Pencere modunda gösterildiğinde (bir bölümü) uygulanacak 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-Pencere API'sinin 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ısı

Document Picture-in-Picture API VideoJS oynatıcı demosunu deneyebilirsiniz. Kaynak kodu kontrol etmeyi unutmayın.

Pomodoro

Bir pomodoro web uygulaması olan Tomodoro da mümkün olduğunda Document Picture-in-Picture API'den yararlanmaktadır (GitHub pull isteği bölümüne bakın).

Geri bildirim

Lütfen önerilerinizi ve sorularınızı 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 Amacı
Gönderim Niyeti

Teşekkür

Hero resim: Jakob Owens.