Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.

Como crear un botón FullScreen para Video en HTML5 (Chrome, Safari y Firefox)


  Publicado hace |  Etiquetas: , , , , , ,

Desde que llego la etiqueta video o la posibilidad de incrustar video en la Web sin necesidad de utilizar plugins fue sin duda una excelente noticia pero lo que no llego a convencer a todos es la falta de poder ver el video a Pantalla Completa, lo mas cercano a esto era la posibilidad de ver el video en tamaño 100% de la ventana o navegador.

Nuevas actualizaciones de los navegadores ha podido agregar esta funcionalidad tan demandada por los desarrolladores para ofrecer mejores aplicaciones tales como Safari 5 y Google Chrome 15 o versiones beta como Firefox 8.

Si ya deseas implementarlo por lo menos en Google Chrome y Safari entonces puedes aplicar lo siguiente:

Como crear un botón  FullScreen para Video en HTML5 (Chrome y Firefox)

Nuevas funciones de JavaScript

Esta función aplica al motor WebKit (Chrome y Safari)

webkitEnterFullScreen()

Esta función aplica al motor de Gecko (Firefox)

mozRequestFullScreen()

 

Aplicando las funciones a un video

Es tan sencillo realizar un botón para video en Pantalla Completa como hacer un botón que envíe un Alert con un mensaje, hay muchas maneras de hacerlo pero solo vamos a darles la idea de cómo se puede hacer.

Ya teniendo listo el código HTML con el video incrustado

<video id="video" width="320" height="240" controls>
     <source src="http://html5facil.com/demos/videos/big_buck_bunny.webm"  type='video/webm; codecs="vp8, vorbis"'>
      <source src="http://html5facil.com/demos/videos/big_buck_bunny.mp4" type='video/mp4; codecs="avc1,mp4a"'>
</video><br />
<button id="completa" class="button">Video a pantalla completa</button>	

Creamos el código JavaScript  utilizando JQuery obteniendo el evento Click de una etiqueta Button, quiere decir que cuando el usuario de Click en el botón, el evento se ejecutara, en este caso la función de Pantalla Completa.

$(document).ready(function(){
	//Funcion que se activa al evento click del button o boton
	$('#completa').click(function(){
             // Codigo para activar pantalla completa en Chrome o Safari 5
             //Seleccionamos el elemnento video del ID video, en este caso la misma etiqueta video
             $('#video')[0].webkitEnterFullScreen();
				
             /* Codigo para activar pantalla completa en Firefox 8 o proximas actualizaciones
             $('#video')[0].mozRequestFullScreen();
             */
		
	});
});

 

Nota: Para que sea utilizado en los 2 navegadores necesitas comparar la compatibilidad de las funciones ya que las 2 al mismo tiempo crean un error.

Con este tutorial puedes empezar a experimentar o aplicarlo a pequeños proyectos que no exijan ser utilizados en todos los navegadores ya que no todos lo soportan a un pero en un futuro podría aplicarse igual.

Puedes ver el demo funcionando en Safari o Chrome aqui mismo

comments powered by Disqus