Como usar el tag video en HTML5

HTML5 incluye la capacidad de mostrar video en tu web, sin necesidad de usar Flash, Quicktime o cualquier otro plugin. Funciona en Firefox, Chrome, Safari, Opera y en Internet Explorer desde la versión 9.

Todo es gracias al elemento <Video> en HTML5. En este tip te mostraré cómo usarlo.

HTML5, elemento <video>

Lo mas básico del elemento video seria poner el src con la dirección al archivo .ogv (Codificado en .ogg, con codec On2 VP8) o .mp4 (Con codec H264). Pero con sólo poner el código HTML no se mostrara nada, ya que el video no tiene sus controles y como predeterminado no reproducirse automáticamente, para ello agregaremos los controles simplemente agregando controls.

Tomaremos como base de prueba, este video de Opera en OGG: http://devfiles.myopera.com/articles/2642/sintel-trailer.ogv

Básico:

Código :

<video src="tu_video.ogv">Tu navegador no soporta HTML5 </video>

Con controles:

Código :

<video controls src="http://devfiles.myopera.com/articles/2642/sintel-trailer.ogv">Tu navegador no soporta HTML5 </video>

Si abrimos nuestro video ya nos aparecerán los controles y tendremos la posibilidad de reproducir nuestro video, ahora vamos a agregarle una imagen previa antes de reproducir el video, para ello agregamos poster="tu_poster.png" con nuestro poster.

Código :

<video controls src="tu_video.ogv" poster="tu_poster.png" >Tu navegador no soporta HTML5 </video>

Lo siguiente seria agregar el tipo de video que estamos agregando con type="video/mp4".
Atento al tipo de elemento que estas usando.

Código :

<video controls src="tu_video.ogv" poster="tu_poster.png" type="video/ogg">Tu navegador no soporta HTML5 </video>

Reproducir video en multiples codecs (H264 / On2 VP8 : mp4 / ogg) en HTML5 con <source>

Listo ya tenemos nuestro video en HTML5 casi completo, ¿Pero por que casi completo? Porque no todos los navegadores soportaran el video en formato .ovg para ello agregaremos una variación que seria un <source> para que si nuestro formato .ogv no es aceptado se use otro formato.

Código :

<video autoplay controls>
<source src="tu_video.ogv" type="video/ogg" />
<source src="tu_video.mp4" type="video/mp4" />
<p>Tu navegador no soporta HTML5</p>
 </video>

Y para los navegadores que no soportan html5 como IE agregaremos el video en flash con .flv.

Código :

<video autoplay controls>
<source src="tu_video.ogv" type="video/ogg" />
<source src="tu_video.mp4" type="video/mp4" />
<object width="160" height="90" data="video.flv">
        <param name="movie" value="tu_video.flv">
        <embed src="tu_video.flv" width="160" height="90">
</object>
<p>Tu navegador no soporta HTML5 ni Flash ¿En que era estas?</p>
 </video>

Si queremos añadirle un tamaño en especifico solamente agregamos height="x" y width="x".

Para que nuestro reproductor se reproduzca en el momento que termine de cargarse podemos agregar autoplay.

Listo ahora ya sabemos como empezar a utilizar el Elemento Video en HTML5. Aquí podrás ver el Ejemplo Terminado.

Estos son los tipos de formatos para los videos.

• video/mp4 para MP4 video
  
• video/ogg para Ogg Theora video
  
• video/webm para WebM video

Nota: El .ovg es para Firefox y .mp4 es para Safari.

Saludos a todos espero que esto les sirva de algo

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.