Utilizando HTML siempre nos encontramos con el problema de tener que depender de QuickTime y AdobeFlash para insertar audio o vídeo. HTML5 nos da las etiquetas AUDIO y VIDEO que nos permiten, con mayor facilidad, insertar este tipo de recursos multimedia en nuestra página.

En esta ocasión nos centraremos en la etiqueta VIDEO, que como habréis podido deducir nos permite insertar vídeos en nuestra página. El uso de esta etiqueta es tan simple como lo que podéis ver en el siguiente ejemplo:

<video src="example.mp4" width="600" height="320" controls preload></video>

Ya ves que no es complejo, aunque requiere una cierta explicación. Estos son los atributos que tienes a tu disposición:

• SRC: Enlaza con el archivo de video que queremos reproducir
• WIDTH: El ancho del video en pixeles.
• HEIGHT: El alto del video en pixeles.
• CONTROLS: Nos permite incluir los controles del reproductor del navegador como el botón de play o el volumen.
• AUTOPLAY: Permite especificar si el archivo de video se reproduce desde que se carga la pagina.
• PRELOAD: Carga un poco el archivo de video en el buffer antes de iniciar la reproducción, para que no se trabe mientras se reproduce.

Todo parecía muy fácil hasta aquí, pero, mi querido programador web, ya sabes que NUNCA es tan fácil. Si los problemas para conseguir la compatibilidad de tu maquetación en CSS en todos los navegadores te ha hecho envejecer prematuramente varios años ya sabes lo que viene ahora: Los distintos navegadores dan soporte a distintos formatos de vídeo (seguro que no te sorprende, seguro que te lo venías oliendo). Las compatibilidade de los motores de los navegadores con los codecs de vídeo son:

• H.264 :: Soportado por Safari, Google Chrome e Internet Explorer 9. Se trata de un codec propietario
• OGG Theora :Soportado por Firefox, Opera y Google Chrome. Es libre, pero menos eficiente que H.264, ya que ofrece menor calidad y mayor tamaño de los archivos.
• WebM : Soportado por Google Chrome, Firefox y Opera, aunque Google también ha creado un plugin para que funcione en IE9, y en Safari debería funcionar ya que usa como base QuickTime para reproducir vídeo. Es libre, ofrece una calidad similar a H.264 pero además consigue una mejor compresión, creando archivos más ligeros. Incluso el FlashPlayer de Adobe soportará este formato.

Todo esto provocado por el enfrentamiento entre los consorcios WHATWGs (apoyado mayoritariamente por Google, Mozilla y varias empresas del campo de software libre) y MPEG-LA (este apoyado por el eje del mal: Apple/Microsoft). Tal cual está el tema de las licencias a día de hoy, en 2016 el codec H.264 podría pasar a ser de pago, así que habrá que tener ojo con eso.

Entonces ¿cómo consigo la compatibilidad entre varios navegadores? Tampoco es difícil. Lo que tienes que hacer es no poner el atributo src dentro de la etiqueta VIDEO. En su lugar, tienes que crear etiquetas SOURCE con los distintos src y especificando en cada uno el codec, y ponerlas entre la apertura y el cierre de VIDEO, como en el siguiente ejemplo:

<video width="600" height="320" controls preload>
  <source src="ejemplo.ogv" type='video/ogg; codecs="theora,vorbis"' />
  <source src="ejemplo.mp4" type='video/mp4; codecs="avc1,mp4a"' />
  <source src="ejemplo.webm" type='video/webm; codecs="vp8,vorbis"' />
</video>

Como ves, la etiqueta SOURCE tiene como argumentos el src y type, donde definís el tipo de vídeo y el codec a reproducir.

En fin, el futuro próximo de la web está aquí, en HTML5. Haciendo uso de CSS además podréis lograr un reproductor más personalizado, más «bonito» y visible. Id pegándole un ojo.