Pantalla en pantalla (PIP)

François Beaufort

Desde abril de 2017, Chrome para Android O admite la función de pantalla en pantalla. Permite que los usuarios reproduzcan un elemento <video> en una pequeña ventana superpuesta que no esté bloqueada por otras ventanas, de modo que puedan mirar mientras realizan otras tareas.

Funciona de la siguiente manera: abre Chrome, ve a un sitio web que contenga un video y reprodúcelo en pantalla completa. Desde allí, presiona el botón de inicio para ir a la pantalla principal de Android, y el video que se esté reproduciendo pasará automáticamente al modo de pantalla en pantalla. Eso es todo. Es genial, ¿no?

Sí, pero ¿qué sucede con las computadoras? ¿Qué sucede si el sitio web quiere controlar esa experiencia?

La buena noticia es que, en este momento, se está redactando una especificación de la API web de Picture-in-Picture. El objetivo de esta especificación es permitir que los sitios web inicien y controlen este comportamiento exponiendo el siguiente conjunto de propiedades a la API:

• Notifica al sitio web cuando un video entra y sale del modo de pantalla en pantalla.
• Permite que el sitio web active la función Pantalla en pantalla en un elemento de video a través de un gesto del usuario.
• Permite que el sitio web salga del modo de pantalla en pantalla.
• Permite que el sitio web verifique si se puede activar la función Pantalla en pantalla.

Y así es como podría verse:

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

Comentarios

¿Qué te parece? Envía tus comentarios y plantea problemas en el repositorio de WICG de pantalla en pantalla. Queremos conocer tu opinión.

Cómo evitar el comportamiento predeterminado de PIP de Android

Actualmente, puedes evitar que el video use el comportamiento predeterminado de PiP de Android en Chrome respondiendo a un evento de cambio de tamaño y detectando cuándo el tamaño de la ventana cambió significativamente (consulta el código a continuación). No se recomienda como una solución permanente, pero proporciona una opción temporal hasta que se implemente la 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();
    }
});