Pantalla en pantalla (PIP)

Francisco Beaufort
François Beaufort

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

Funciona así: 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 en reproducción pasará automáticamente al modo pantalla en pantalla. ¡Listo! Es genial, ¿verdad?

Foto de pantalla en pantalla de Android
Figura 1: Foto pantalla en pantalla de Android

Pero, ¿qué pasa con las computadoras de escritorio? ¿Qué pasa si el sitio web quiere controlar esa experiencia?

La buena noticia es que se está redactando una especificación de la API web de pantalla en pantalla en este momento. El objetivo de esta 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 al modo de pantalla en pantalla y sale de él.
  • Permite que el sitio web active la función pantalla en pantalla en un elemento de video mediante un gesto del usuario.
  • Permite que el sitio web salga del modo de pantalla en pantalla.
  • Permite que el sitio web compruebe si se puede activar la función pantalla en pantalla.

Y así es como se vería:

<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

Entonces, ¿qué opinas? Envía tus comentarios y menciona problemas en el repositorio de WICG para pantalla en pantalla. ¡Estamos ansiosos por conocer tu opinión!

Cómo evitar el comportamiento predeterminado de PIP en Android

Actualmente, puedes evitar que el video use 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ó 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();
    }
});