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(WebM) | 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:
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:
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:
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:
¿Y si no quiero usar el plugin de flash?
Siempre podremos ofrecerte un link directo al archivo para que lo descargues:
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