Picture in picture (PIP)

François Beaufort

GitHub

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

Ecco come funziona: apri Chrome, visita un sito web che contiene un video e riproducilo a schermo intero. Da qui, premi il pulsante Home per andare alla schermata Home di Android e il video in riproduzione passerà automaticamente a Picture in picture. È tutto. Non male, no?

Lo è, ma per quanto riguarda i computer desktop? E se il sito web volesse controllare questa esperienza?

La buona notizia è che la specifica dell'API Picture in picture per il web è in fase di stesura mentre parliamo. Questa specifica mira a consentire ai siti web di avviare e controllare questo comportamento esponendo il seguente insieme di proprietà all'API:

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

Ecco come potrebbe presentarsi:

<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

Quindi cosa ne pensi? Invia il tuo feedback e segnala eventuali problemi nel repository WICG Picture in picture. Non vediamo l'ora di sapere cosa ne pensi.

Impedire il comportamento PIP predefinito di Android

Oggi puoi impedire ai video di utilizzare il comportamento PIP predefinito 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 soluzione non è consigliata come soluzione definitiva, 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();
    }
});