Como usar el tag video en HTML5

Por OmarV el 16 de Agosto de 2010 con 15,218 visitas. HTML, CSS y Javascript Otros tutoriales por OmarV. 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 versin 9. Todo es gracias al elemento <Video> en HTML5. En este tip te mostrar cmo usarlo.

HTML5, elemento <video>

Lo mas bsico del elemento video seria poner el src con la direccin al archivo .ogv (Codificado en .ogg, con codec On2 VP8) o .mp4 (Con codec H264). Pero con slo poner el cdigo HTML no se mostrara nada, ya que el video no tiene sus controles y como predeterminado no reproducirse automticamente, 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 Bsico: Cdigo :
<video src="tu_video.ogv">Tu navegador no soporta HTML5 </video>

Con controles: Cdigo :

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

Si abrimos nuestro video ya nos aparecern 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. Cdigo :
<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. Cdigo :
<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 variacin que seria un <source> para que si nuestro formato .ogv no es aceptado se use otro formato. Cdigo :
<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. Cdigo :
<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 aadirle un tamao 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 podrs ver el Ejemplo Terminado. Estos son los tipos de formatos para los videos.
y y y

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