Hoy voy a hacer una introducción al elemento video de HTML5. Como ya sabéis, la nueva especificación de HTML5 incluye la nueva etiqueta video con la que se puede empotrar archivos de vídeo de forma nativa en nuestros proyectos web sin necesidad de plugins adicionales.
Con el aumento del ancho de banda, los contenidos de vídeo han ido aumentando de forma vertiginosa hasta convertirse en una de las mayores necesidades de ancho de banda en la red. El método por excelencia a la hora de reproducir vídeo a través de un navegador ha sido utilizar el plugin de Flash. Mucho ha tenido que ver la industria del porno primero y YouTUBE después en esa decisión. Usar el plugin de flash no es la única vía, se puede usar también Silveright ya que no tiene complejidad alguna utilizar dicha plataforma para generar contenido multimedia. Por supuesto, todo eso va a cambiar con la llegada de HTML5.
Como siempre y para no perder la costumbre, existe una guerra entre fabricantes de navegadores sobre que formato de vídeo debe de ser el estándar para la nueva especificación y por supuesto no todos reproducen los mismos formatos de forma nativa
| Códec | Tipo | IE >=9 | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Ogg Theora | Libre | no[1] | si | si | no[2] | si |
| H.264 | Propietario | si | no[3] | no | si | no |
| VP8 | Libre | no[4] | si | si | no | si |
¿Cómo funciona?
El elemento video es muy parecido al elemento audio, también dispone de los atributos autoplay, loop y preload. También se puede especificar la fuente de un archivo bien usando el atributo src en la etiqueta de apertura o bien usando el elemento source entre las etiquetas de apertura y cierre. Asimismo puedes utilizar los controles que te ofrece el navegador de forma nativa utilizando el atributo controls o bien puedes ofrecer tus propios controles en JavaScript.
Obviamente, el elemento video ocupa espacio en la ventana, por lo tanto será de nuestro agrado definir un tamaño para el mismo:
<video src="archivo.mp4" controls width="360" height="240">
</video>Portada del vídeo
También podemos definir una imagen representativa para el vídeo para que sea mostrada al navegador como portada del elemento antes de la reproducción usando el atributo poster:
<video src="archivo.mp4" controls width="360" height="240" poster="poster.jpg">
</video>Multiformato
Como siempre y para no marginar a ningún navegador, podremos especificar diferentes archivos en diferentes formatos para que todos ellos puedan reproducir nuestro contenido:
<video controls width="360" height="240" poster="poster.jpg">
<source src="archivo.ogv" type="video/ogg" />
<source src="archivo.mp4" type="video/mp4" />
</video>Como ocurre con el elemento audio no es necesario especificar el atributo type pero es siempre recomendable.
¿Y que pasa con los que usamos IE8 o inferiores?
Pues no hay problema, podemos usar el mismo truco que usábamos con el elemento audio para seguir dando soporte a lo que pronto serán navegadores obsoletos y añadir el plugin de Flash a través de la etiqueta object:
<video controls width="360" height="240" poster="poster.jpg">
<source src="archivo.ogv" type="video/ogg" />
<source src="archivo.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=archivo.mp4">
<param name="movie" value="player.swf?file=archivo.mp4" />
</object>
</video>¿Y si no quiero usar el plugin de flash?
Siempre podremos ofrecerte un link directo al archivo para que lo descargues:
<video controls width="360" height="240" poster="poster.jpg">
<source src="archivo.ogv" type="video/ogg" />
<source src="archivo.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=archivo.mp4">
<param name="movie" value="player.swf?file=archivo.mp4" />
<a href="archivo.mp4">Descarga la película</a>
</object>
</video>Ventajas de ser nativo
Sin entrar en polémicas sobre la conveniencia o no de usar el plugin de Flash, el poder empotrar un reproductor de vídeo de forma nativa en nuestros proyectos es muy excitante. El problema con utilizar un reproductor de vídeo basado en plugins es que su contenido esta encerrado y oculto para el resto del documento. Disponer de elementos nativos en HTML supone la integración de los mismos con otras tecnologías del navegador como JavaScript y CSS.
En Genbeta Dev | Introducción a HTML5
Comentarios
Estupendo artículo Oscar.
Me gusta especialmente que hayas decidido denominar simplemente "propietario" a H.264, en lugar de otras palabras más "feas" ;)
Aunque creo firmemente que esta etiqueta será fundamental en los próximos años, hay quien todavía no lo ve tan claro. Por ejemplo, hace un año Youtube publicaba esto al respecto: http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html
Algunas de aquellas dudas están o superadas o camino de superarse, pero creo que todavía veremos a Flash (y Silverlight en menor medida) rondando una buena temporada.
En otras cosas, porque a la industria del porno no creo que le haga ilusión que uno pueda bajarse el vídeo simplemente usando el menú contextual del navegador. El DRM, aunque a los usuarios no nos guste, es fundamental para ciertas industrias.
Me alegro de que te haya gustado.
Si tienes un IE 9 a mano pásate por este comentario y añade el benchmark en IE 9 por favor ;)
Ya los ha publicado otro comentarista. Obtengo valores similares a los suyos.
Voya montar una tienda, y tengo que hacer una web. Estoy planteandome hacerla con HTML5 (he trabajado y hecho varias webs con versiones anterioes y CSS, con algo de javascrip)
Pero no estoy del todo seguro, no sé si todavía es demasiado pronto para esta tecnología, y quizás mucha gente no podría ver la web por usar navegadores anticuados. ¿Que opinas?¿Harías la web en HTML5, o es demasiado pronto?
Gracias :D
PD: Se me olvidadaba, la web tendra un slideshow para mostrar fotografías y un par de videos. No me gusta nada flash, siempre que me es posible, lo evito.
-- editado por última vez a las 15:25
Saludos Sergio.
Los slideshows los haría con JavaScript, seguramente con jQuery y los vídeos los pondría con HTML5 y Flash, seguramente con Flowplayer.
Recuerda que puedes ofrecer HTML5 para los navegadores que lo soportan y Flash para los que no.
Un saludo.
Muy interesante el artículo. Esperemos que de una vez se pongan deacuerdo en aceptar un estandar todos y más ahora que tambien hay que preocuparse de dispositivos moviles.
Tiene tela HTML5, cuanto más conoce uno más le sorprende ^^ La verdad los de la W3C se lo han currado, los nuevos tags aparte de su funcionalidad están ideados de una forma homogénea y limpia, sobretodo por lo de "el tag es el tag y lo de dentro la alternativa". Para mí Flash es una buena tecnología, pero estos nuevos tags mejoran mucho la parcela multimedia dentro de las webs y el Flash no tiene nada que hacer, sobretodo si contamos con el juego que va a dar junto a JS.
Por cierto, que evidente la tabla de formatos, Chrome/Firefox/Opera tirando de formatos libres y Microsoft/Apple de los privativos. Nada nuevo bajo el sol :P
Escribir un comentario
Para hacer un comentario es necesario que te identifiques: ENTRA o conéctate con FacebookConnect