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, diğer pencereler tarafından engellemediği küçük bir yer paylaşımlı pencerede bir <video> öğesini oynatmalarına olanak tanır. Böylece, başka şeyler yaparken izleyebilirler.

İşleyiş şekli şu şekildedir: Chrome'u açın, video içeren bir web sitesine gidin ve videoyu tam ekran oynatın. Oradan, Android ana ekranınıza gitmek için Ana ekran düğmesine bastığınızda 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?

Güzel bir haberimiz var. Şu anda Pencere İçinde Pencere Web API'si spesifikasyonu sizlerle devam ediyor. Bu spesifikasyon, aşağıdaki özellik grubunu API'ye göstererek web sitelerinin bu davranışı başlatmasını ve kontrol etmesini sağlar:

  • 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 Pencere İçinde Pencere WICG deposunda geri bildiriminizi ve sorunlarınızı iletin. Görüşlerinizi öğrenmek isteriz.

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

Günümüzde bir yeniden boyutlandırma etkinliğine yanıt vererek ve pencere boyutunun önemli ölçüde değiştiğini algılayarak videonun Chrome'da Android'in varsayılan PiP davranışını kullanmasını engelleyebilirsiniz (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();
    }
});