Introduccin

La etiqueta de vdeo es una de las funciones de HTML5 que suscitan

ms inters. Esta etiqueta se suele presentar como alternativa a Flash
para el contenido multimedia, pero tiene ms aplicaciones. Aunque
recientemente se ha incorporado al resto de etiquetas HTML
omnipresentes, sus posibilidades y su compatibilidad con diferentes
navegadores han aumentado a una increble velocidad. Como se puede
ver en este tutorial, la ventaja principal de la etiqueta de vdeo es la
posibilidad de integracin natural con las dems capas de la pila de
desarrollo web, como CSS y JavaScript, as como con las otras etiquetas
HTML.
En este tutorial se explican los aspectos bsicos de la etiqueta de vdeo y
se muestran ejemplos de diferentes integraciones con otras funciones de
HTML5, como el elemento <canvas>.

1. El marcado
Las lneas de cdigo que se muestran a continuacin deben ser
suficientes para que funcione el vdeo HTML en un sitio web.
<video>
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E,
mp4a.40.2"' />
<source src="movie.webm" type='video/webm; codecs="vp8,
vorbis"' />
</video>

En este fragmento se utiliza la etiqueta <source>, que permite incluir

varios formatos como tipos alternativos en caso de que el navegador del

usuario no admita alguno de ellos. En la siguiente seccin se ofrece ms

informacin sobre este tema.
Tambin se puede utilizar un nico formato de vdeo que haga que la
sintaxis sea muy parecida a la de la etiqueta de imagen. Esta sintaxis
ser la ms utilizada en un futuro prximo cuando todos los navegadores
admitan un formato de vdeo comn.
<video src="movie.webm"></video>

Por el momento, nos centraremos en el primer caso, que actualmente es

el ms comn. Lo ms importante que debes recordar es que tienes que
asegurarte de que tu servidor muestre los archivos de vdeo con el tipo
MIME correcto en el encabezado Content-Type. De lo contrario, los vdeos
podran no funcionar correctamente (aunque s funcionen en una copia
local del sitio). En un archivo de configuracin "httpd.conf" de Apache,
solo habra que aadir estas lneas:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Si tu aplicacin se muestra a travs de Google App Engine, tendrs que

aadir un bloque parecido al siguiente en el archivo "app.yaml" (uno por
cada formato):
- url: /(.*\.ogv)
static_files: videos_folder/\1
mime_type: video/ogg
upload: videos_folder/(.*\.ogv)

Para mejorar el rendimiento del cliente, es importante no olvidarse de

especificar el atributo type en las etiquetas source cuando se tenga que
hacer referencia a varios formatos. De ese modo, el navegador podr
decidir qu formatos puede descargar y reproducir y no descargar los
formatos que no pueda reproducir para aumentar el rendimiento del sitio.

2. Formatos de vdeo
El concepto de formato de vdeo se puede entender como un archivo zip
que contiene secuencias de vdeo y secuencias de audio. Los tres
formatos que se deben tener en cuenta para la Web son WebM, MP4 y
OGV:

.mp4 = H.264 + AAC

.ogg/.ogv = Theora + Vorbis

.webm = VP8 + Vorbis

La velocidad de evolucin de la etiqueta de vdeo es verdaderamente
alentadora. Hace tan solo un ao, el nico navegador que admita la
etiqueta de vdeo en su versin estable era Safari. Ahora, todos los
navegadores actuales admiten vdeo HTML5, incluido IE9, la ltima
versin del navegador Internet Explorer. En cuanto a los cdecs, Firefox,
Chrome y Opera han acordado admitir WebM como formato de vdeo
comn a travs del proyecto WebM. Internet Explorer tambin admitir
ese formato si el cdec se instala en el ordenador (esperemos que este
requisito no sea imprescindible en el futuro).
Nota: en el momento de escribir este artculo, Safari no admite el formato
WebM.
A continuacin se muestra un ejemplo en el que se observa que el
navegador solo puede mostrar uno o dos de los tres formatos

mencionados (puedes sentirte afortunado si tu navegador admite los tres

formatos!):
En el momento de escribir este artculo (agosto de 2010), este es el
fragmento que ofrece la combinacin de formatos ms segura para que
el vdeo se muestre en todos los navegadores:
<video>
<source src="movie.webm" type='video/webm; codecs="vp8,
vorbis"' />
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E,
mp4a.40.2"' />
<source src="movie.ogv" type='video/ogg; codecs="theora,
vorbis"' />
Video tag not supported. Download the video <a
href="movie.webm">here</a>.
<video>

Nota: debido a un error del iPad, hay que indicar .mp4 como primera
opcin si se quiere que el vdeo se cargue en ese dispositivo. Hasta que
se corrija el error, claro...
Como se ha indicado anteriormente, casi todos los proveedores de
navegadores aceptaron admitir un formato de vdeo comn. Por tanto, en
menos de un ao, el cdigo que probablemente se utilizar en toda la
Web ser el siguiente:
<video>
<source src="movie.webm" type='video/webm; codecs="vp8,
vorbis"' />

<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E,

mp4a.40.2"' />
Video tag not supported. Download the video <a
href="movie.webm">here</a>.
<video>

Uno de los principales problemas relacionados con el uso del formato

.mp4 es que su cdec de vdeo (h.264) no es un cdec abierto y que las
licencias que tendra que pagar una empresa para utilizarlo son bastante
complejas. En este captulo sobre vdeos, se ofrece ms informacin
acerca de este formato.
Otro problema que afecta al formato .mp4 es que el atributo type tiene
que ser ms especfico que otros formatos dependiendo del perfil que se
utilice para codificar el vdeo. Aunque el ms comn es "avc1.42E01E,
mp4a.40.2", es importante comprobar esta lista de perfiles para
asegurarse.
Aunque Microsoft anunci que la versin 9 de su navegador Internet
Explorer (IE9) admitira la etiqueta de vdeo, as como otros elementos
HTML5, su tasa de migracin de usuarios a versiones ms recientes es
inferior a la de los dems navegadores principales. Esto nos lleva a la
siguiente seccin:

3. Qu pasa con las versiones actuales de IE que

no admiten la etiqueta de vdeo?
Flash como alternativa
Flash tambin puede ser una solucin alternativa. Segn cul sea el
formato del vdeo, es posible que haya que volver a codificarlo con un
formato compatible para el reproductor Flash. La buena noticia es que

Adobe se ha comprometido a admitir el formato WebM en su reproductor

Flash, aunque no se sabe con certeza cundo se podr empezar a
utilizar. Sin embargo, el mayor inconveniente que tiene esta solucin en
comparacin con la del complemento Chrome Frame es que se obtiene
el reproductor Flash como versin degradada de la interfaz de usuario
personalizada o de las funciones mejoradas que se hayan utilizado para
la etiqueta de vdeo. En el tutorial Gua rpida de implementacin de la
etiqueta de audio de HTML5, se ofrece informacin detallada sobre esta
tcnica.

4. Codificacin de los vdeos

Si necesitas codificar tus vdeos en los formatos mencionados en la
seccin anterior, puedes utilizar el conversor Miro Video Converter para
Windows y Mac para conseguir fcilmente el formato que necesites. El
programa no permite hacer muchos cambios de configuracin, pero
ofrece los formatos ms comunes de la Web, incluidos los tres formatos
utilizados en este tutorial. En realidad, este software es un contenedor
de ffmpeg y ffmpeg2theora que se puede utilizar en Windows, Mac y
Linux desde la lnea de comandos (especificando ms parmetros en
caso necesario). En divintohtml5.org, se ofrece ms informacin sobre
esta herramienta.

5. La parte divertida
Como se indic en la introduccin, la principal ventaja de la pertenencia
de la etiqueta de vdeo a la familia HTML5 es la posibilidad de integracin
con las dems capas de la pila de desarrollo web. En los siguientes
ejemplos se ofrece una visin general de lo que se puede hacer con ella.

5.1. Vdeo + otros elementos HTML

Todos los atributos HTML comunes se pueden utilizar ahora en el
reproductor de vdeo. Por ejemplo, en el fragmento que aparece a

continuacin, se utilizatabindex para poder acceder a los controles del

reproductor. Hay algunos atributos nuevos que se pueden utilizar en la
etiqueta de vdeo que tambin son comunes a la etiqueta de audio, como
el atributo de reproduccin continua (loop) y el de reproduccin
automtica (autoplay). El atributo poster indica qu imagen se mostrar
durante la carga inicial del vdeo y al final de su reproduccin, mientras
que controls se utiliza para indicar que, en lugar de crear controles
personalizados, queremos que el navegador muestre los controles
automticamente. Tambin hay un atributo preload, que se puede utilizar
para descargar el vdeo en segundo plano en cuanto se carga la pgina
aunque no haya empezado a reproducirse.
<video poster="star.png" autoplay loop controls tabindex="0">
<source src="movie.webm" type='video/webm; codecs="vp8,
vorbis"' />
<source src="movie.ogv" type='video/ogg; codecs="theora,
vorbis"' />
</video>

El nivel completo de integracin de la etiqueta de vdeo como elemento

nativo del navegador acaba con algunos problemas que se podan
presentar antes con los reproductores externos insertados, como la
superposicin de iframes y mens desplegables en el reproductor o una
apariencia extraa cuando se ajustaba de forma dinmica el tamao de
los otros elementos HTML que rodeaban el vdeo.
Al no tratarse el vdeo como un elemento ajeno insertado, el usuario tiene
otras ventajas. Por ejemplo, aunque el foco de atencin se encuentre en
el reproductor, se pueden realizar perfectamente acciones como
desplazarse por la pgina o pulsar teclas del teclado.

Nota: si intentas crear documentos polglotas para mantener la sintaxis

de XHTML en el contexto de HTML5, los atributos de tu cdigo deben
estar definidos del siguiente modo:
<video poster="star.png" autoplay="autoplay" loop="loop"
controls="controls" tabindex="0">
<source src="movie.webm" type='video/webm; codecs="vp8,
vorbis"' />
<source src="movie.ogv" type='video/ogg; codecs="theora,
vorbis"' />
</video>

5.2. Vdeo + JavaScript

La etiqueta de vdeo incluye una serie de atributos y de mtodos que
permiten tener un buen control del vdeo mediante el cdigo JavaScript
utilizado. Puedes verlos en tiempo real en este ejemplo.
Al igual que ocurre con los dems elementos HTML, se pueden aadir
eventos comunes a la etiqueta de vdeo (por ejemplo, eventos del ratn,
eventos de arrastre, enfoque, etc.), pero el elemento de vdeo incluye una
serie de nuevos eventos que permiten detectar (y controlar) el momento
de reproduccin, pausa o finalizacin del vdeo. Como la carga de un
recurso de vdeo puede tener muchas condiciones, hay mltiples eventos
que permiten llevar a cabo el debido control del proceso de carga, tanto
en la red (loadstart, progress, suspend, abort, error, emptied, stalled)
como en el bfer (loadedmetadata, loadeddata, waiting, playing, canplay,
canplaythrough).
En su nivel ms bsico, se puede aadir el evento "canplay" para
empezar a hacer cosas con el vdeo.
video.addEventListener('canplay', function(e) {

this.volume = 0.4;
this.currentTime = 10;
this.play();
}, false);

Actualmente, hay varios controles de reproductores personalizados

disponibles en Internet. En el ejemplo que aparece a continuacin, se
utilizan algunos elementos para controlar dos vdeos de forma simultnea
y se emula el efecto de avance rpido con el atributo playbackRate.
Utiliza el control deslizante para cambiar el volumen entre los vdeos.

5.3. Vdeo + CSS

Como podrs imaginarte, se puede aplicar estilo a la etiqueta de vdeo
con propiedades CSS tradicionales (p. ej., bordes, opacidad, etc.), ya que
esta etiqueta es uno de los elementos principales del DOM, pero lo mejor
es que tambin se le pueden aplicar las ltimas propiedades CSS3,
como reflejos, mscaras, gradientes, transformaciones, transiciones y
animaciones.
Coloca el cursor sobre el siguiente vdeo para ver cmo funcionan
algunas de estas propiedades.
#video-css.enhanced {
border: 1px solid white;
-moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
-webkit-box-shadow: 5px 44px 28px #333; /* Saf3.0+, Chrome */

box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */

-moz-transform: translate(0, 10px);

-o-transform: translate(0, 10px);

/* FF3.5+ */
/* Opera 10.5 */

-webkit-transform: translate(0, 10px);

/* Saf3.1+, Chrome */

5.4. Vdeo + canvas

El elemento canvas es otro elemento HTML5 que ofrece muchas
posibilidades cuando se utiliza junto con la etiqueta de vdeo.
En el ejemplo que aparece a continuacin, se utilizan dos funciones del
elemento <canvas> para importar y exportar imgenes. La primera es el
mtododrawImage, que permite importar imgenes de tres fuentes
diferentes: un elemento de imagen, otro elemento canvas y un
elemento <video>. Esto significa que, cada vez que se ejecute este
mtodo, el marco actual del vdeo se importar y se mostrar en el
elemento canvas.
La segunda funcin de la etiqueta <canvas> que se utiliza es el
mtodotoDataURL, que permite exportar el contenido del elemento
canvas a una imagen. Haz clic en el botn de reproduccin del vdeo que
aparece a continuacin para ver cmo se crea una imagen a partir del
vdeo cada 1,5 segundos. En realidad, el elemento canvas utilizado para
la importacin/exportacin est oculto.
En el cdigo que aparece a continuacin, se puede ver que simplemente
se ha creado un intervalo que se ejecuta cada 1,5 segundos con el
mtodo drawImage que utiliza el elemento de vdeo como fuente.

video_dom.addEventListener('play', function() {
video_dom.width = canvas_draw.width = video_dom.offsetWidth;
video_dom.height = canvas_draw.height =
video_dom.offsetHeight;
var ctx_draw = canvas_draw.getContext('2d');
draw_interval = setInterval(function() {
// import the image from the video
ctx_draw.drawImage(video_dom, 0, 0, video_dom.width,
video_dom.height);
// export the image from the canvas
var img = new Image();
img.src = canvas_draw.toDataURL('image/png');
img.width = 40;
frames.appendChild(img);
}, 1500)
}, false);

En el siguiente ejemplo, daremos un paso ms. Si se aumenta la

frecuencia con la que se debe importar y mostrar la imagen del vdeo, se
puede emular la misma frecuencia de vdeo en el elemento canvas. De
esta forma, se pueden hacer todo tipo de transformaciones en el
elemento canvas como si se estuvieran realizando en el propio vdeo.

En la parte izquierda, se puede ver la reproduccin de vdeo original. En

el centro, aparece un elemento canvas que se utiliza para importar las
imgenes cada 33 milisegundos. En la parte derecha, aparece otro
elemento canvas que "sufrir" todas las transformaciones al mismo
tiempo que importa las imgenes del primer elemento canvas. El nico
motivo por el que se utilizan dos elementos canvas es porque as se
consigue un rendimiento muy superior al que se puede conseguir
utilizando un nico elemento canvas que importe las imgenes y se
transforme al mismo tiempo.
Esta misma tcnica de importacin de imgenes se puede aplicar
tambin aWebGL. Si utilizas WebGL, deberas poder importar los marcos
de un vdeo y mostrarlos en un cubo giratorio en 3D, por ejemplo. En
el sitio web de MDN, se ofrece ms informacin sobre esta
implementacin.

5.5. Vdeo + SVG

SVG permite mostrar y manipular grficos vectoriales mediante
programacin, pero tambin incluye ms funciones, como los efectos de
filtro SVG. Estos filtros permiten elegir un elemento DOM especfico y
aplicarle algunos efectos especiales como los de mosaicos, difuminado,
composicin, etc. En el momento de escribir este artculo (agosto de
2010), Firefox 4 e IE9 admiten la integracin de SVG, que permite utilizar
HTML y CSS en el elemento de vdeo (en este ejemplo, se utilizan
JavaScript y el elemento canvas para garantizar tambin el
funcionamiento en navegadores que an no admitan la integracin de
SVG):
<svg id='image' version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>

<filter id="myblur">
<feGaussianBlur stdDeviation="1" />
</filter>
</defs>
</svg>
<style>
video { filter:url(#myblur); border: 2px solid red; }
</style>