Yayınlanma tarihi: 5 Şubat 2025
Chrome 120'den itibaren, kullanıcı mevcut sekmesinden başka bir sekmeye geçtiğinde video konferans web uygulamaları otomatik olarak pencere içinde pencere modunda bir pencere açabilir. Bu özellik, bir doküman sunarken veya diğer sekmeleri ya da pencereleri kullanırken katılımcıları gerçek zamanlı olarak görmek ve onlarla etkileşimde bulunmak isteyen sunuculara yarar sağlar. Ayrıntılar için Görüntülü konferans web uygulamaları için otomatik pencere içinde pencere başlıklı makaleyi inceleyin.
Chrome 134'ten itibaren, ses veya video oynatan web uygulamaları otomatik olarak pencere içinde pencere moduna girebilir. Bu sayede, web'deki müzik ve video oynatıcıları artık kullanıcı sekme değiştirdiğinde mini oynatıcı penceresine sorunsuz bir şekilde geçebilir. Böylece manuel etkinleştirme ihtiyacı ortadan kalkar.
Bu medya oynatma kullanım alanlarını desteklemek için Chrome 134'ten itibaren masaüstü web uygulamaları, olumlu bir kullanıcı deneyimi sağlamak amacıyla birkaç kısıtlamayla birlikte otomatik olarak pencere içinde pencere moduna girebilir. Bir web uygulaması, medya oynatma için otomatik pencere içinde pencere özelliğini yalnızca aşağıdaki koşulların tümünü karşılıyorsa kullanabilir:
Üst çerçeve URL'si, Güvenli Tarama hizmetine göre güvenlidir.
Medya, üst çerçevede yer alır.
Medya, son iki saniye içinde sesli olarak oynatılmış olmalıdır.
Medya ses odağına sahiptir.
Medya oynatılıyor.
"enterpictureinpicture"
işlemi için bir medya oturumu işlemi işleyicisi kaydedildi.Kullanıcının Medya Etkileşim İndeksi eşiği aşıldı. Bu durum, kullanıcının bu web uygulamasında sık sık medya tükettiğini gösterir. Bu durum, kullanıcının tarayıcı ayarı "Resim içinde resim moduna girme isteğinde bulunabilir" ise geçerlidir. Kullanıcı, web uygulamasının pencere içinde pencere moduna girmesine açıkça izin veriyorsa bu koşul geçerli olmaz.
![Chrome Tarayıcı site bilgileri bölmesinde otomatik pencere içinde pencere ayarı.](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/browser-setting.jpg?hl=tr)
386193409 numaralı hata, hata ayıklama ve uygulamayı kolaylaştırmak için görünen koşulların uygulanmasını izler.
Chrome, başka bir pencere içinde pencere öğesi açıkken otomatik pencere içinde pencere özelliğini tetiklemez. Mevcut pencere içinde pencere penceresi otomatik olarak açıldıysa ve kapanmak üzereyse bu kural geçerli değildir.
Bir web uygulaması koşulları karşıladığında, odak başka bir sekmeye geçirildiğinde "enterpictureinpicture"
işlemi için medya oturumu işlem işleyici geri çağırma işlevi tetiklenir. Bu sayede web uygulaması, kullanıcı hareketi olmadan bir pencere içinde pencere açar. Ardından kullanıcıya, sitenin pencere içinde pencere moduna her zaman, yalnızca bu sefer veya hiç girmesine izin vermek isteyip istemediğini soran bir izin iletişim kutusu gösterilebilir.
![Pencere içinde pencere penceresindeki izin yer paylaşımı. Kullanıcıdan sitenin otomatik olarak pencere içinde pencere moduna girmesine izin vermek isteyip istemediğini sorar.](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/pip-window-popup.jpg?hl=tr)
Bir HTML <video>
öğesinden pencere içinde pencere penceresi açmak için <video> için Pencere İçinde Pencere API'sini veya rastgele HTML içeriğiyle doldurulacak, her zaman üstte olan bir pencere açmak için Doküman Pencere İçinde Pencere API'sini kullanabilirsiniz. Pencere içinde pencere penceresi açıldığında odaklanmaz ve sayfa tekrar görünür hale geldiğinde otomatik olarak kapanır.
Aşağıdaki örnekte, bir kullanıcı düğmeyi tıkladığında HTML <video>
öğesinin nasıl oynatılacağı gösterilmektedir. Ardından, "enterpictureinpicture"
işlemi için bir pencere içinde pencere açan geri çağırma işleviyle güvenli bir şekilde medya oturumu işlem işleyicisi kaydedin. Bu pencerede, <video> için Pencere İçinde Pencere API'si içeren video yer alır.
const video = document.querySelector("video");
async function onPlayButtonClick() {
// Play video.
await video.play();
}
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
await video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
Document Picture-in-Picture API'yi gösteren VideoJS oynatıcı demosunu deneyin veya Video Media Session ve Audio Media Session örnekleriyle oynayın.
Etkileşim kurma ve geri bildirim paylaşma
Geri bildiriminiz veya karşılaştığınız sorunlar varsa bunları crbug.com adresinde paylaşabilirsiniz.
Kaynaklar
Tasdik
Yorumları için Benjamin Keen ve Frank Liberato'ya teşekkür ederiz.