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:
Básico
:
Código :
<video src="tu_video.ogv">Tu navegador no soporta HTML5 </video>




Con
controle
s:style='font-size:12.0pt;line-height:107%'>


9.5pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:major-fareast;color:#333333'>Código :
style='font-size:9.5pt;font-family:"Arial","sans-serif";color:#333333'>


<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.style='mso-special-character:line-break'>




9.5pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:major-fareast;color:#333333'>Código :
style='font-size:9.5pt;font-family:"Arial","sans-serif";color:#333333'>


<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.style='mso-special-character:line-break'>




9.5pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:major-fareast;color:#333333'>Código :
style='font-size:9.5pt;font-family:"Arial","sans-serif";color:#333333'>


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












style='font-size:17.0pt;line-height:107%;font-family:"Arial","sans-serif";
color:#333333;letter-spacing:-.75pt'>Reproducir video en multiples codecs (H264
/ On2 VP8 : mp4 / ogg) en HTML5 con <source>
style='font-size:17.0pt;line-height:107%;font-family:"Arial","sans-serif";
color:#333333;letter-spacing:-.75pt'>






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.style='mso-special-character:line-break'>


"Times New Roman","serif"'>

9.5pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:major-fareast;color:#333333'>Código :
style='font-size:9.5pt;font-family:"Arial","sans-serif";color:#333333'>

<video autoplay controls>
style='margin-top:1.5pt;margin-right:0cm;margin-bottom:15.0pt;margin-left:0cm;
background:white;border:none;mso-border-alt:solid #EEEEEE 2.25pt;padding:0cm;
mso-padding-alt:8.0pt 8.0pt 8.0pt 8.0pt'>color:#775555'><source src="tu_video.ogv" type="video/ogg" />style='margin-top:1.5pt;margin-right:0cm;margin-bottom:15.0pt;margin-left:0cm;
background:white;border:none;mso-border-alt:solid #EEEEEE 2.25pt;padding:0cm;
mso-padding-alt:8.0pt 8.0pt 8.0pt 8.0pt'>color:#775555'><source src="tu_video.mp4" type="video/mp4" />style='margin-top:1.5pt;margin-right:0cm;margin-bottom:15.0pt;margin-left:0cm;
background:white;border:none;mso-border-alt:solid #EEEEEE 2.25pt;padding:0cm;
mso-padding-alt:8.0pt 8.0pt 8.0pt 8.0pt'>color:#775555'><p>Tu navegador no soporta HTML5</p>style='margin-top:1.5pt;margin-right:0cm;margin-bottom:15.0pt;margin-left:0cm;
background:white;border:none;mso-border-alt:solid #EEEEEE 2.25pt;padding:0cm;
mso-padding-alt:8.0pt 8.0pt 8.0pt 8.0pt'>color:#775555'> </video>





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





9.5pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:major-fareast;color:#333333'>Código :
style='font-size:9.5pt;font-family:"Arial","sans-serif";color:#333333'>

<video autoplay controls>
style='margin-top:1.5pt;margin-right:0cm;margin-bottom:15.0pt;margin-left:0cm;
background:white;border:none;mso-border-alt:solid #EEEEEE 2.25pt;padding:0cm;
mso-padding-alt:8.0pt 8.0pt 8.0pt 8.0pt'>color:#775555'><source src="tu_video.ogv" type="video/ogg" />style='margin-top:1.5pt;margin-right:0cm;margin-bottom:15.0pt;margin-left:0cm;
background:white;border:none;mso-border-alt:solid #EEEEEE 2.25pt;padding:0cm;
mso-padding-alt:8.0pt 8.0pt 8.0pt 8.0pt'>color:#775555'><source src="tu_video.mp4" type="video/mp4" />style='margin-top:1.5pt;margin-right:0cm;margin-bottom:15.0pt;margin-left:0cm;
background:white;border:none;mso-border-alt:solid #EEEEEE 2.25pt;padding:0cm;
mso-padding-alt:8.0pt 8.0pt 8.0pt 8.0pt'>color:#775555'><object width="160" height="90" data="video.flv">style='margin-top:1.5pt;margin-right:0cm;margin-bottom:15.0pt;margin-left:0cm;
background:white;border:none;mso-border-alt:solid #EEEEEE 2.25pt;padding:0cm;
mso-padding-alt:8.0pt 8.0pt 8.0pt 8.0pt'>color:#775555'> <param name="movie" value="tu_video.flv">style='margin-top:1.5pt;margin-right:0cm;margin-bottom:15.0pt;margin-left:0cm;
background:white;border:none;mso-border-alt:solid #EEEEEE 2.25pt;padding:0cm;
mso-padding-alt:8.0pt 8.0pt 8.0pt 8.0pt'>color:#775555'> <embed src="tu_video.flv" width="160" height="90">style='margin-top:1.5pt;margin-right:0cm;margin-bottom:15.0pt;margin-left:0cm;
background:white;border:none;mso-border-alt:solid #EEEEEE 2.25pt;padding:0cm;
mso-padding-alt:8.0pt 8.0pt 8.0pt 8.0pt'>color:#775555'></object><p>Tu navegador no soporta HTML5 ni Flash ¿En que era estas?</p>
style='margin-top:1.5pt;margin-right:0cm;margin-bottom:15.0pt;margin-left:0cm;
background:white;border:none;mso-border-alt:solid #EEEEEE 2.25pt;padding:0cm;
mso-padding-alt:8.0pt 8.0pt 8.0pt 8.0pt'>color:#775555'> </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.

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
 

Fabiana González

New member
El problema de html5 es que no todos lo soportan y ese es el dilema de estos días. Para ello les contaré un poco de un script que hemos probado mucho este mes, se trata de FlareVideo.
 
lareVideo es una muy buena opción para implementar HTML5 (con el código que nos ha mostrado el amigo) en los navegadores que lo soportan, poniendo una versión alternativa del video para los que no lo soportan.
Así en Firefox, Chrome y Opera se muestra el ogv, en Safari un mp4 y en IE una versión flash. Lo mejor de esto es que se puede manejar al antojo la interfaz gráfica en todos los navegadores con CSS!.
Quizás algunos dirán "usa JavaScript" como un punto en contra (yo también lo pensé), pero si estamos hablando de HTML5 que está saliendo recién a flote en comparación a los años que se lleva con JavaScript, esto no ni por ningún motivo punto en contra.

Otra cosa: Si el HTML5 va a ser un estándar, al reproductor debería poder aplicarle nativamente CSS, porque la interfaz gráfica no tiene nada de estándar en los distintos navegadores.
 
Arriba