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:
webkitfullscreenchangemozfullscreenchangeMSFullscreenchange
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.
