Gracias al API Fullscreen de HTML5 podemos poner un vídeo a pantalla completa dentro de nuestra página web. Así aprovecharemos toda la pantalla para que se pueda ver el vídeo de la mejor manera posible.
Lo primero que tendremos que hacer es poner un vídeo dentro de nuestra página HTML5. Para ello nos apoyamos en el elemento video, al cual le pasamos el fichero que contiene el vídeo mediante el atributo src.
<video id="mivideo" src="tecla.ogv" controls> Tu navegador no soporta el elemento <code>video</code>. </video>
Una cosa importante es que debemos de dar un identificador mediante el atributo id al vídeo. Ya que será el identificador que utilicemos para acceder a él y poder poner el vídeo a pantalla completa.
Lo siguiente que tenemos que saber el cómo utilizar el API Fullscreen, este nos ofrece un método que se llama .requestFullScreen(), el cual permite que casi cualquier elemento de la página se visualice a pantalla completa.
Tenemos que saber que hay varias implementaciones o hacks de este método, por lo cual necesitaremos utilizar los siguientes métodos para mantener compatibilidad entre navegadores.
element.requestFullscreen(); element.mozRequestFullScreen(); element.webkitRequestFullscreen(); element.msRequestFullscreen();
Así creamos una función que controle todas ellas.
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 pasarle el elemento vídeo, accediendo a su id a esta función. Para ello vamos a crear un botón en HTML que nos gestione la acción de poner el vídeo a pantalla completa.
<button id="Entrar" type="button" name="button">Video Pantalla Completa</button>
Mediante la gestión de los eventos del botón, de su evento onclick, vamos a realizar la asociación del vídeo con la función getFullscreen().
document.getElementById("Entrar").addEventListener("click", function(e){
getFullscreen(document.getElementById("mivideo"));
},false);
Vemos que hemos utilizado el método .getElementById() para poder acceder al elemento video mediante su id y pasarlo a la función getFullscreen().
Cada vez que pulsemos sobre el botón veremos nuestro vídeo a pantalla completa.
