Pantalla en pantalla (PIP)

François Beaufort

Desde abril de 2017, Chrome para Android O admite la función Pantalla en pantalla. Permite a los usuarios reproducir un elemento <video> en una pequeña ventana superpuesta que no está bloqueado por otras ventanas, de modo que puedan ver mientras hacen otras acciones.

Así es como funciona: abre Chrome, ve a un sitio web que tenga un video y reproducirla en pantalla completa. Desde allí, presiona el botón de inicio para ir a tu dispositivo Android La pantalla principal y el video que se está reproduciendo pasarán automáticamente a Pantalla en pantalla. ¡Listo! Se ve bien, ¿verdad?

Sí, pero ¿qué ocurre con las computadoras de escritorio? ¿Qué sucede si el sitio web quiere controlar que una experiencia fluida a los desarrolladores?

La buena noticia es que se está redactando una especificación de la API web de pantalla en pantalla. mientras hablamos. El objetivo de esta especificación es permitir que los sitios web inicien y controlen esta exponiendo el siguiente conjunto de propiedades a la API:

• Notifica al sitio web cuando un video entre y salga del modo de pantalla en pantalla.
• Permite que el sitio web active la función de 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 de 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 los problemas en el Repositorio de WICG de pantalla en pantalla. Nos gustaría saber tus pensamientos.

Cómo evitar el comportamiento PIP predeterminado de Android

Actualmente, puedes evitar que los videos usen el comportamiento PIP predeterminado de Android en Chrome responde a un evento de cambio de tamaño y detecta si el tamaño de la ventana cambiaron significativamente (consulta el código a continuación). No se recomienda como permanente de Google Cloud, pero ofrece 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();
    }
});