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.
![Sintel'in fragman videosunu oynatan pencere içinde pencere.](https://developer.chrome.google.cn/static/docs/web-platform/document-picture-in-picture/image/a-picture-picture-window-a75f117724132.png?authuser=0000&hl=tr)
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);
});
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).
![Bir pomodoro web uygulaması olan Tomodoro'nun ekran görüntüsü.](https://developer.chrome.google.cn/static/docs/web-platform/document-picture-in-picture/image/screenshot-tomodoro-po-6e0b39f6f0b17.png?authuser=0000&hl=tr)
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.