Pencere İçinde Pencere (PIP)

François Beaufort

GitHub

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

İşleyiş şekli: Chrome'u açın, video içeren bir web sitesine gidin ve videoyu tam ekran oynatın. Buradan, Ana Ekran düğmesine basarak Android Ana Ekranınıza gittiğinizde oynatılan video otomatik olarak Pencere İçinde Pencere moduna geçer. Hepsi bu kadar! Çok güzel, değil mi?

Doğru ama masaüstüne ne olacak? Web sitesi bu deneyimi kontrol etmek isterse ne olur?

Bununla birlikte, Pencere İçinde Pencere Web API spesifikasyonu henüz bu aşamada taslak aşamasındadır. Bu spesifikasyon, aşağıdaki özellik grubunu API'ye göstererek web sitelerinin bu davranışı başlatmasına ve kontrol etmesine olanak tanımayı amaçlar:

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

Bu da 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

Bu durumda ne düşünüyorsunuz? Lütfen geri bildiriminizi göndererek sorunlarınızı Pencere İçinde Pencere WICG deposunda paylaşın. Düşüncelerinizi öğrenmek için sabırsızlanıyoruz!

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 tespit ederek videoların 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();
    }
});