Pencere İçinde Pencere (PIP)

François Beaufort
François Beaufort
GitHub

Nisan 2017'den beri Android O için Chrome, Pencere İçinde Pencere özelliğini destekliyor. Kullanıcıların, <video> öğesini diğer pencereler tarafından engellenmeyen küçük bir yer paylaşımı penceresinde oynatmasına olanak tanır. Böylece kullanıcılar, diğer işleri yaparken videoyu izleyebilir.

İşlem şu şekildedir: Chrome'u açın, video içeren bir web sitesine gidin ve videoyu tam ekran oynatın. Buradan, Android ana ekranınıza gitmek için ana sayfa düğmesine basın. Oynatılan video otomatik olarak Pencere İçinde Pencere moduna geçer. Hepsi bu kadar. Oldukça etkileyici, değil mi?

Android Pencere İçinde Pencere fotoğrafı
Şekil 1. Android Pencere İçinde Pencere fotoğrafı

Evet, ama masaüstünde ne olacak? Web sitesi bu deneyimi kontrol etmek isterse ne olur?

İyi haber şu ki, şu anda Pencere içinde pencere Web API'si spesifikasyonu hazırlanıyor. Bu spesifikasyon, web sitelerinin API'ye aşağıdaki özellik grubunu sunarak bu davranışı başlatmasına ve kontrol etmesine olanak tanımayı amaçlamaktadır:

  • Bir video pencere içinde pencere moduna girdiğinde ve bu moddan çıktığında web sitesini bilgilendirin.
  • Web sitesinin, kullanıcı hareketi aracılığıyla bir video öğesinde Pencere İçinde Pencere'yi tetiklemesine izin verin.
  • Web sitesinin Pencere İçinde Pencere modundan çıkmasına izin verin.
  • Web sitesinin, Pencere İçinde Pencere'nin tetiklenip tetiklenemeyeceğini kontrol etmesine izin verin.

Bu durum aşağıdaki gibi görünebilir:

<video id="video" src="https://example.com/file.mp4"></video>

<button id="pipButton"></button>

<script>
    // Hide button if Picture-in-Picture is not supported.
    pipButton.hidden = !document.pictureInPictureEnabled;

    pipButton.addEventListener('click', function() {
    // If there is no element in Picture-in-Picture yet, let's request Picture
    // In Picture for the video, otherwise leave it.
    if (!document.pictureInPictureElement) {
        video.requestPictureInPicture()
        .catch(error => {
        // Video failed to enter Picture-in-Picture mode.
        });
    } else {
        document.exitPictureInPicture()
        .catch(error => {
        // Video failed to leave Picture-in-Picture mode.
        });
    }
    });
</script>

Geri bildirim

Ne düşünüyorsunuz? Lütfen geri bildiriminizi gönderin ve Resim İçinde Resim WICG deposunda sorun bildirin. Görüşlerinizi öğrenmek isteriz.

Android'in varsayılan PIP davranışını önleme

Şu anda, yeniden boyutlandırma etkinliğine yanıt vererek ve pencere boyutunun önemli ölçüde değiştiğini tespit ederek videonun Chrome'da Android'in varsayılan PiP davranışını kullanmasını önleyebilirsiniz (aşağıdaki koda bakın). Bu, kalıcı bir çözüm olarak önerilmez ancak Web API uygulanana kadar geçici bir seçenek sunar.

// See whether resize is small enough to be PiP. It's a hack, but it'll
// work for now.
window.addEventListener('resize', function() {
    if (!document.fullscreenElement) {
    return;
    }

    var minimumScreenSize = 0.33;
    var screenArea = screen.width * screen.height;
    var windowArea = window.outerHeight * window.outerWidth;

    // If the size of the window relative to the screen is less than a third,
    // let's assume we're in PiP and exit fullscreen to prevent Auto PiP.
    if ((windowArea / screenArea) < minimumScreenSize) {
    document.exitFullscreen();
    }
});