Picture in picture (PIP)

François Beaufort

Da aprile 2017, Chrome per Android O supporta la modalità Picture in Picture. Consente agli utenti di riprodurre un elemento <video> in una piccola finestra overlay non bloccata da altre finestre, in modo che possano guardare mentre si svolgono altre attività.

Ecco come funziona: apri Chrome, vai a un sito web che contiene un video e riproducilo a schermo intero. A questo punto, premi il tasto Home per tornare alla schermata Home di Android e il video in riproduzione passerà automaticamente alla modalità Picture in picture. È tutto. Non male, vero?

Sì, ma che dire del computer? E se il sito web vuole controllare questa esperienza?

La buona notizia è che al momento è in fase di stesura la specifica di un'API web Picture in picture. Lo scopo di questa specifica è consentire ai siti web di avviare e controllare questo comportamento esponendo all'API il seguente insieme di proprietà:

• Invia una notifica al sito web quando un video entra e esce dalla modalità Picture in picture.
• Consenti al sito web di attivare la modalità Picture in picture su un elemento video tramite un gesto dell'utente.
• Consenti al sito web di uscire dalla modalità Picture in picture.
• Consenti al sito web di verificare se è possibile attivare Picture in picture.

Ecco come potrebbe apparire:

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

Feedback

Che ne pensi? Invia il tuo feedback e segnala i problemi nel repository WICG Picture-in-Picture. Non vediamo l'ora di conoscere la tua opinione.

Impedire il comportamento PIP predefinito di Android

Attualmente, puoi impedire al video di utilizzare il comportamento predefinito di PiP di Android in Chrome rispondendo a un evento di ridimensionamento e rilevando quando le dimensioni della finestra sono cambiate in modo significativo (vedi il codice di seguito). Questa opzione non è consigliata come soluzione permanente, ma fornisce un'opzione temporanea fino all'implementazione dell'API web.

// 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();
    }
});