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 hacen otras tareas.

Así es como funciona: abre Chrome, visita 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. ¡Listo! 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 la especificación es permitir que los sitios web inicien y controlen este comportamiento mediante la exposición del 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. ¡Estamos ansiosos por conocer tus opiniones!

Cómo evitar el comportamiento predeterminado de PIP de Android

Actualmente, puedes evitar que los videos usen el comportamiento de PIP predeterminado de Android en Chrome. Para ello, debes responder a un evento de cambio de tamaño y detectar cuándo el tamaño de la ventana cambió de forma significativa (consulta el código a continuación). Esto 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();
    }
});