Gracias al API Fullscreen vamos a poder poner un documento a pantalla completa con HTML5 y aprovechar, de esta manera, todo el área de visualización de nuestra pantalla.
Para ello, en el API Fullscreen, contamos con el método .requestFullscreen(). Este método se puede aplicar bien sobre un documento HTML o bien sobre cualquier elemento del documento, sea este una imagen, un vídeo,… que serán los elementos más típicos a poner en pantalla completa u otros elementos como un botón,… que no sé yo quién querría poner un botón a pantalla completa (a gustos, colores).
Así podremos ejecutar el método de la siguiente forma:
var Promise = Element.requestFullscreen(options);
El método .requestFullscreen() nos devuelve una promesa o promise. Esta promesa será la que nos indique si podemos o no poner el documento a pantalla completa con HTML5.
Una cosa que tenemos que tener en cuenta es que el método requestFullscreen() puede estar implementado o no en el navegador que utilizamos, por lo cual es bueno utilizar los hacks de los diferentes navegadores.
element.requestFullscreen(); element.mozRequestFullScreen(); element.webkitRequestFullscreen(); element.msRequestFullscreen();
De esta manera podemos construir una función estándar para poner un elemento a pantalla completa con el siguiente código:
function getFullscreen(element){
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
Ahora lo que tenemos que hacer es llamar a dicha función para que nos ayude a poner el documento a pantalla completa con HTML5. Pero lo que recibe es un elemento HTML. Entonces ¿qué elemento representa al documento? El elemento que representa al documento es document.documentElement.
Así que simplemente llamamos a la función con este elemento:
<button id="Entrar" type="button" name="button">Pantalla Completa</button>
document.getElementById("Entrar").addEventListener("click", function(e){
getFullscreen(document.documentElement);
},false);
Hemos añadido un botón para que nos ayude a lanzar el poner el documento a pantalla completa.
Y ¿ahora? Bueno, qué menos que le demos al usuario la posibilidad de salir de la pantalla completa. Que también puede dar a la tecla Esc. Pero vamos a ayudarle mediante el método .exitFullscreen()
La sintaxis del método .exitFullscreen() es la siguiente:
exitPromise = document.exitFullscreen();
Al igual que sucedía con requestFullscreen() recibimos una promesa que nos indica si podrá salir del modo pantalla completa. Además también sucede la falta de implementación estándar, así que tendremos varios métodos relacionados con sus hacks.
document.exitFullscreen(); document.mozCancelFullScreen(); document.webkitExitFullscreen();
Y nos haremos una función para salir de la pantalla completa:
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
Ya solo nos quedará añadirla a nuestro documento.
<button id="Salir" type="button" name="button">Salir Pantalla Completa</button>
document.getElementById("Salir").addEventListener("click", function(e){
exitFullscreen();
},false);
Con esto tenemos completa nuestra página que nos ayude a poner el documento a pantalla completa con HTML5 y lógicamente salir de ella.
