API de Pantalla Completa de JavaScript

Introducción a la API de Pantalla Completa de JavaScript

En el ámbito del desarrollo web, las experiencias de usuario atractivas son fundamentales, y la API de Pantalla Completa de JavaScript juega un papel crucial para lograrlo. Esta potente herramienta permite a los desarrolladores solicitar programáticamente la visualización en pantalla completa de un elemento, mejorando significativamente la experiencia de visualización para aplicaciones multimedia, juegos y otro contenido interactivo.

Habilitar el modo de pantalla completa en JavaScript

Para habilitar el modo de pantalla completa en JavaScript, los desarrolladores utilizan el método requestFullscreen. Este método forma parte de la API de Pantalla Completa y se aplica a cualquier elemento DOM que desees mostrar en pantalla completa. Ten en cuenta que la API requiere una interacción del usuario (como un clic) para activarse, por lo que normalmente se llama dentro de un controlador de eventos. Así es como puedes usar este método de manera efectiva:

---

<div id="main-content">
    <button id="fs-btn">Go Fullscreen</button>
    <div id="video-container">
        <!-- Your content like a video or interactive media -->
    </div>
</div>

<script>
const element = document.getElementById("video-container");
const btn = document.getElementById("fs-btn");

btn.addEventListener("click", function() {
    if (document.fullscreenEnabled) {
        element.requestFullscreen().catch(err => {
            console.error(`Error attempting to enable fullscreen: ${err.message}`);
        });
    } else {
        console.log("Fullscreen API is not supported in this browser.");
    }
});
</script>

Este fragmento de código demuestra cómo activar el modo de pantalla completa para un elemento específico (video-container) mediante un botón. El script verifica la disponibilidad de la API antes de intentar entrar en pantalla completa, lo que garantiza una amplia compatibilidad con los navegadores modernos. El uso de addEventListener mantiene el marcado limpio y sigue las mejores prácticas modernas.

Salir del modo de pantalla completa

Para ofrecer una experiencia de usuario completa, también es crucial saber cómo salir del modo de pantalla completa. Los usuarios o desarrolladores podrían querer ofrecer una opción para volver a la vista estándar después de entrar en pantalla completa. Así es como puedes implementar esta funcionalidad:

---

<div id="exit-button">
    <button id="exit-btn">Exit Fullscreen</button>
</div>

<script>
document.getElementById("exit-btn").addEventListener("click", function() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
});
</script>

En este ejemplo, la función exitFullScreen permite al usuario salir del modo de pantalla completa haciendo clic en un botón 'Salir de pantalla completa'. Ten en cuenta que document.exitFullscreen() sale del elemento de pantalla completa actualmente activo, independientemente de qué elemento activó originalmente la solicitud.

Manejo de cambios de pantalla completa con eventos

La API de Pantalla Completa proporciona eventos que te notifican cuando un elemento entra o sale del modo de pantalla completa. Esto es especialmente útil para alternar elementos de la interfaz de usuario o activar otros cambios en tu aplicación:

---

document.addEventListener("fullscreenchange", function(event) {
    if (document.fullscreenElement) {
        console.log("Entered fullscreen mode");
    } else {
        console.log("Exited fullscreen mode");
    }
});

Este oyente de eventos registra mensajes en la consola según si el documento está en modo de pantalla completa o no, lo que ayuda a los desarrolladores a comprender las transiciones de estado. Además, deberías manejar el evento fullscreenerror para capturar casos en los que el navegador deniegue la solicitud (por ejemplo, debido a restricciones de seguridad o cancelación del usuario):

document.addEventListener("fullscreenerror", function(event) {
    console.error("Fullscreen request failed:", event.target.error);
});

Ahora, pongámoslo todo junto y veámoslo en un ejemplo:

Un ejemplo completo:

---

<div id="main-content">
    <button id="fs-btn">Go Fullscreen</button>
    <div id="video-container" style="position: relative; height: 100vh; display: flex; align-items: center; justify-content: center;">
        <div id="exit-button" style="display: none;">
            <button id="exit-btn">Exit Fullscreen</button>
        </div>
    </div>
</div>

<script>
const element = document.getElementById("video-container");
const exitBtn = document.getElementById("exit-btn");
const exitButtonContainer = document.getElementById("exit-button");

document.getElementById("fs-btn").addEventListener("click", function() {
    if (document.fullscreenEnabled) {
        element.requestFullscreen().catch(err => {
            console.error(`Error attempting to enable fullscreen: ${err.message}`);
        });
    }
});

exitBtn.addEventListener("click", function() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
});

function updateButtonVisibility() {
    exitButtonContainer.style.display = document.fullscreenElement ? "block" : "none";
}

document.addEventListener("fullscreenchange", updateButtonVisibility);
document.addEventListener("fullscreenerror", function(event) {
    console.error("Fullscreen request failed:", event.target.error);
});
</script>

Try it Yourself »

Veamos la funcionalidad del código:

Funciones de JavaScript- goFullScreen(): Esta función hace que el contenedor de video entre en modo de pantalla completa. Primero verifica que el navegador sea compatible con la API de Pantalla Completa a través de document.fullscreenEnabled, y luego llama al método estándar requestFullscreen().

• exitFullScreen(): Esta función sale del modo de pantalla completa utilizando el método estándar document.exitFullscreen().

Oyentes de eventos para cambios de pantalla completa- updateButtonVisibility(): Esta función ajusta la visibilidad del botón de salida según si algún elemento está actualmente en modo de pantalla completa.

• El oyente de eventos fullscreenchange activa esta función cada vez que cambia el estado de pantalla completa, asegurando que el botón de salida solo aparezca cuando el navegador esté en modo de pantalla completa y se oculte en caso contrario.

Compatibilidad y soporte de navegadores

La API de Pantalla Completa de JavaScript es ampliamente compatible con los navegadores modernos, incluidos Chrome, Firefox, Safari, Opera y Edge. Las implementaciones modernas utilizan los métodos estándar sin prefijos de proveedor. Históricamente, Safari requería el prefijo -webkit- (webkitRequestFullscreen, webkitExitFullscreen), pero las versiones actuales admiten completamente el estándar sin prefijos. Para estilizar elementos mientras están en modo de pantalla completa, puedes usar la pseudo-clase CSS :fullscreen:

:fullscreen {
    background-color: #000;
    color: #fff;
    padding: 20px;
}

Conclusión

La API de Pantalla Completa en JavaScript es una herramienta poderosa para mejorar la experiencia del usuario en la web. Al proporcionar entornos interactivos e inmersivos, los desarrolladores pueden mejorar significativamente la participación y la satisfacción de los usuarios. Los ejemplos y métodos discutidos proporcionan una base para incorporar la funcionalidad de pantalla completa en tus aplicaciones web, garantizando una experiencia de usuario fluida y atractiva.

Práctica

¿Cuáles de las siguientes afirmaciones son verdaderas respecto a la API de Pantalla Completa de JavaScript?

Permite que el contenido web se visualice en modo de pantalla completa en dispositivos compatibles.La API de Pantalla Completa puede cambiar la orientación de la pantalla del dispositivo.Los desarrolladores pueden alternar el modo de pantalla completa en elementos como videos e imágenes.La API proporciona métodos para bloquear la entrada de la pantalla del usuario mientras está en pantalla completa.Incluye un evento que se activa al entrar o salir de pantalla completa.