Videos en HTML5 (Primera parte)

Videos en Html5 - Primera Parte

El video en la web siempre estuvo presente gracias a Adobe, quien con su pluguin flashplayer logró ocupar un lugar en todos los navegadores y convertir al video Flash en casi un estandar de internet. Ahora con HTML5 el panorama se esta tornando hacia nuevas ideologias, entre ellas el formato abierto de video.


Vimeo y Youtube ya estan dando el salto a la repoducción de video con las nuevas etiquetas de HTML5, y este me parece un buen momento para introducirce en una nueva aventura. Voy a dar un recorrido sobre los formatos de videos soportados y los tags del lenguaje entre otros puntos fundamentales.


Para mostrar video en la web con HTML5 es necesario convertir el archivo a un formato que puedan reproducir los contenedores compatibles con los navegadores. Los codecs y contenedores soportados son H.264/MP4, OGG/Theora y WebM para video, y para audio tenemos los codecs Vorbis y AAC.
Hasta hace un tiempo se hablaba en la web que el uso del codec .H264 requeria el pago de una licencia para poder reproducir videos en internet, pero hoy estoy leyendo en Baluart.net que el panorama esta cambiando.

Hoy como desarrollador apoyo el uso del codec OGG/Theora que a pesar de tener una calidad inferior a .H264, mantiene la ideología de un formato abierto y gratuito. Asi que para esta primera parte del articulo me voy a centrar en la compresion de video en OGG/Theora.


Codificar videos a OGG/Theora con Firefogg

Para codificar video recomiendo el uso del pluguin Firefogg por su facilidad de uso y prestaciones, el pluguin se instala en firefox como un nuevo complemento y lo puedes hacer desde el siguiente enlace:

Descargar Firefogg

Una vez instalado, se puede empezar a codificar video facilmente siguiendo los pasos que describo a coninuación:

1 – Entramos a Firefogg.org
2 – Hacemos click en “Make Video”
3 – Seleccionamos el video a convertir
4 – En la pestaña “Predefinidos” elegimos “Video Web Theora, Vorbis 400Kbit`s y ancho maximo de 400px”

Firefogg panel

5 – En la pestaña “Rango de configuracion” seleccionamos como codec de video a Theora y en el de audio a Vorbis.
6 – Configuramos las opciones de calidad, resolución, metadatos y otras según nuestras necesidades o gustos.

Firefogg - Configuracion

7 – Hacemos click en “Grabar Ogg” y se abrira una pantalla en la que debemos guardar el archivo a convertir para poder comenzar la codificación.

Firefogg - Progreso de conversión de video

8 – Al finalizar el proceso tendremos el video listo para usarlo en html5

Los Tags HTML5 y controles de video

Una vez que tenemos el video convertido podemos empezar a mostrarlo en cualquier documento HTML5 a través de la etiqueta Video. Este tag se puede combinar con otros para poder mostrar una imagen de espera, fijar las dimensiones del contenedor y poner controles de reproducción.

A continuacion describo las posibilidades de la etiqueta Video en dos ejemplos para poder dividir mejor los tags adicionales.

Tag de video, Dimensiones y Poster:

En el siguiente ejemplo se expone la ruta al video comprimido, las dimensiones del mismo y la imagen que aparecera de fondo hasta que arranque el video.

<video src="theraceison.ogv" width="400" height="225" poster="petter-carlsen-poster.jpg"></video>

Imagen de fondo en video html5

Agregar controles, precarga y autoplay

Para agregar controles de reproduccion solo tenemos que agregar la etiqueta Controls, tambien podemos configurar que el video se cargue antes de ser reproducido con Preload y reproducción automática con Autoplay.

<video src="theraceison.ogv" width="400" height="225" poster="petter-carlsen-poster.jpg" controls preload autoplay></video>

Video html5

Compatibilidad con los navegadores

Este formato de video funciona correctamente en Firefox 3.5+, Chrome 5+ y Opera 10.5+.

Recursos Complementarios

Información tecnica sobre el codec OGG/theora
Descripcion técnica sobre este codec de video donde encontraras info sobre su historia y caracteristicas.
Petter carlsen
El músico que use para este ejemplo, tiene muy buenas canciones, lo recomiendo.

Una Respuesta a “Videos en HTML5 (Primera parte)”

  1. juanito dice:

    y como se centra

Deja un comentario