Video con HTML5

Explicamos la nueva etiqueta video de HTML5, que brinda un soporte nativo de este tipo de contenido multimedia a los navegadores, sin la necesidad de usar plugins de flash o javascript.

La capacidad multimedia de HTML5 es uno de los grandes avances de esta última versión de la popular herramienta de diseño web. Las etiquetas que HTML5 incorpora, evitan la necesidad de recurrir a plugins de otras aplicaciones tales como Java Script y Flash.

Éste es el caso del video, medio que ya forma parte de la nueva versión de HTML5 como un elemento natural de la misma, y que cuenta con atributos que hacen mucho más flexible su utilización mediante los navegadores que ya soportan esta característica.

Tal como se ven los avances en cuanto a compatibilidad, no dudamos que en breve todos los navegadores estarán en condiciones de reproducir el video que HTML5 presenta en forma integrada, y de acordar un formato estándar, tema que hasta el momento no ha sido resuelto.

La Etiqueta Video de HTML5

La presentación de videos en páginas web, que en el pasado requería apoyo de desarrollos en Flash, hoy puede realizarse mediante la nueva etiqueta <video>.

La inexistencia de un formato de video estándar para su inserción en los sitios web es todavía una limitación importante. Debido a esto, HTML5 permite la presentación de varios formatos para que el navegador seleccione aquél que se adapte a sus posibilidades de reproducción.

La estrecha vinculación del elemento video con las demás etiquetas nativas de HTML5, sus atributos de configuración y su completa compatibilidad con Java Script y CSS, transforman a esta etiqueta en una herramienta muy poderosa.

<video>
<source src=”film.mp4” type=”video/mp4” />
<source src=”film.webm” type=”video/webm” />
<source src=”film.ogg” type=”video/ogg” />
</video>

Formatos de video en HTML5 según navegador

En este sencillo ejemplo puede notarse la facilidad de la codificación. La inclusión de tales formatos permite que el navegador pueda seleccionar el que sea compatible con sus posibilidades. Como se ve, en este caso se han utilizado los formatos ogg, mp4 y webm. En cuanto a los navegadores, Chrome es por ahora el de más amplio soporte, ya que es compatible con estos tres formatos.  Firefox y Opera soportan webm y ogg, mientras que Internet Explorer, a partir de su versión 9, sólo puede reproducir archivos mp4.

Dos elementos constituyen cada formato: un elemento que contiene las pistas de imagen, y un segundo componente con las pistas de audio. Los nombres de los formatos, mp4, ogg, ogv, son las denominaciones de esta combinación de piezas.

Aunque el archivo en el cual está contenido el video se muestra como una unidad, está compuesto por segmentos diferentes que al actuar en forma simultánea dan como resultado la interacción de imagen y sonido.

Los formatos de video más populares son H.264, Theora y Vp8. En cuanto al audio, estos son MPEG-1 o MP3, AAC y Vorbis.

En cuanto a la combinación de estos codificadores para generar un archivo apto para emitir video:

El formato MP4 contiene los codificadores o codecs H.264 y AAC (Advanced Audio Codec). Theora (códec de video) y Vorbis (audio) constituyen los formatos ogg y ogv. Webm está constituido por Vp8 y Vorbis.

Otras etiquetas asociadas a <video> de HTML5

Como hemos visto en el ejemplo precedente, el atributo source es un elemento muy importante que se incluye dentro de la serie video para indicar las fuente y los tipos de archivo que pueden seleccionarse para la reproducción. Existe una segunda etiqueta, track, que se utiliza para incluir el texto asociado a la imagen y el sonido, como en el caso de los subtítulos con un idioma diferente al original.

<track src="subtitulosesp.vtt" kind="subtitles" srclang="es"
label=”Castellano">

Atributos de video HTML5

Autoplay
Mediante este atributo se indica al navegador que debe iniciar la reproducción del video en cuanto la página termine de cargarse. Es un atributo binario. Si está presente se iniciará la reproducción de inmediato. Si no, se esperará la acción del usuario. Puede dársele un nombre entre comillas, como se ve en el ejemplo.

<video autoplay=”autoplay”>

Controls
La inclusión de este atributo en la etiqueta video produce la aparición de un elemento gráfico con los botones play, pause, stop, de tal manera que el usuario pueda controlar la reproducción.

<video controls>

Height y Width
A través de estos atributos se indica el alto y ancho del cuadrilátero donde se ubicará la película a ser reproducida. Son atributos que pueden obviarse, aunque en ese caso las dimensiones serán asumidas por el navegador y no estaremos seguros de que la ubicación de nuestro film sea la esperada.

<video height=200 width=400>

Loop:
Es el atributo que indicará al navegador que la reproducción de nuestra película debe iniciarse una vez más cada vez que haya concluido.

<video loop>

Muted:
Permite indicar que la reproducción de nuestro video se realizará sin sonido.

<video muted>

Poster:
Éste es un atributo muy importante desde el punto de vista de la presentación, ya que informa la ubicación de un archivo de imagen que representa la carátula de nuestro video. La imagen se muestra mientras la reproducción está detenida; digamos, antes de que el usuario presione el botón “play”. Si se omite el atributo poster, la imagen que se utiliza es el primer cuadro de la película.

<video poster=”/graficos/paisaje.jpg”>

Src:
Especifica, directamente en la etiqueta video, la ubicación o URL del archivo que contiene la película a reproducir, cuando éste es único. En caso contrario, se debe utilizar la etiqueta source.

La incorporación del elemento video como un componente nativo de HTML5, es otra muestra de su desarrollo orientado a la sencillez, la claridad y la eficiencia de la codificación.