Artículos
HTML5

Modo Pantalla Completa

19/Ene/2019

Ya hemos visto en algunos ejemplos el como poner un vídeo a pantalla completa, un documento a pantalla completa o una imagen a pantalla completa. Pero en ambos casos guiábamos al usuario para poner a pantalla completa el elemento. Pero, qué sucede si el usuario pone por su cuenta el modo pantalla completa, ¿podemos saber de alguna manera que nuestra página se está visualizando a pantalla completa en HTML5 y con el API Fullscreen? Y por lo tanto aprovecharnos de dicha capacidad. Ahora vemos cómo podemos hacer esto.

Gestionar el saber si estamos en modo pantalla completa pasa por controlar el evento fullscreenchange. Este evento HTML5 y del API Fullscreen es el que nos permite saber si el usuario ha puesto algún elemento a pantalla completa. Es por ello que lo que tendremos que hacer será manejar dicho evento en nuestro código.

Para poder manejar el evento fullscreenchange nos apoyamos en el método .addEventListener() que nos permite asociar a un evento una función que lo gestione.

window.addEventListener("fullscreenchange",cambioPantalla,false);

Lo que hacemos a la hora de controlar el evento es llamar al método .cambioPantalla(). Este método simplemente nos va a sacar por consola que se ha producido un cambio en el modo de pantalla y un timestamp con el momento en el que se ha producido.

function cambioPantalla(event){
  console.log("Cambio en Pantalla Completa " + Date.now());
}

Vemos que para gestionar el timestamp utilizamos el método Date.now().

Este código nos podría bastar para controlar el cambio de modo de pantalla, si bien las implementaciones de los navegadores pueden cambiar y es por ello por lo que aparecen un conjunto de eventos hack que simulan el comportamiento del evento fullscreenchange. Estos son:

  • webkitfullscreenchange
  • mozfullscreenchange
  • MSFullscreenchange

Es por ello que tendremos que controlar todos los eventos, si bien los mandaremos todos a la misma función de control .cambioPantalla().

window.addEventListener("webkitfullscreenchange",cambioPantalla,false);
window.addEventListener("mozfullscreenchange",cambioPantalla,false);
window.addEventListener("MSFullscreenchange",cambioPantalla,false);

Con esto ya tendríamos el control de cada vez que hay un cambio a un modo pantalla completa en HTML5 y con el API Fullscreen.

Código Fuente

Descárgate el código fuente de Modo Pantalla Completa
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios