Videos en HTML5

Lo que se viene es el HTML5, nuevas opciones para los desarrolladores de páginas webs de cualquier tipo. Aún falta pero el futuro se presenta interesante. Una de sus novedades es la posibiliad de reproducir audio y video sin utilizar Flash, es decir, sin reproductores intermedios, incrustando directamente el archivo mediante una etiqueta.

Algunos de los sitios más conocidos ya emplean esa tecnología como alternativa: Dailymotion, YouTube, Vimeo, etc pero, el problema que se nos presenta es que ahora, será el navegador el que deberá encargarse de esa reproducción y allí es donde aún faltan actualizaciones ya que no se han puesto de acuerdo acerca del formato de esos videos. En Opera y Firefox se utiliza OGG, en Chrome y Safari se utiliza OGG y MP4; a esto, se ha sumado Google proponiendo un nuevo formato llamado WebM que, luego de largas discusiones, parece haber sido aceptado por todos y eso, tal vez, hará que se tranforme en el formato universal con la ventaja de ser de código libre y sin licencias. Aunque, por ahora sólo es un proyecto, todas las empresas han acordado que estará disponible en las próximas versiones de Firefox, Opera, Chorme e incluso Internet Explorer.

Sea como sea, la etiqueta elemental que utilizaremos será tan simple como esta:

<video src="URL_archivo"></video>

Lo que mostrará eso es un reproductor genérico pero, no es la única forma. Ya han comenzado a publicarse proyectos que amplian estas posibilidades, creando reproductores diferentes. De los que he visto, me ha llamado mucho la atención uno llamado Video JS que no es otra cosa que un script y una hoja de estilo completamente personalizable.

Para probarla, lo que debemos hacer es descargar el archivo ZIP que nos ofrecen y allí nos encontraremos con todo lo necesario: un ejemplo HTML, el script, la hoja de estilo por defecto y una carpeta con el resto de los skins alternativos.

Subimos el script a un servidor y lo agregamos a la plantilla antes de </head>:

<script src='URL_video.js' type='text/javascript' charset='utf-8'></script>

o lo agregamos directamente, copiando y pegando el contenido del archivo:

<script type='text/javascript' charset='utf-8'>
//<![CDATA[
... aquí pegamos el contenido ...
//]]>
</script>

Una vez hecho eso, lo activamos y, dependiendo de si usamos alguna otra librería, lo haremos de diferente modo para que se ejecute recién cuando nuestra página se haya cargado.

si usamos jQuery:
<script type='text/javascript' charset='utf-8'>
$(function(){ VideoJS.setup(); })
</script>

si usamos Prototype:
<script type='text/javascript' charset='utf-8'>
document.observe("dom:loaded", function() { VideoJS.setup(); });
</script>

si no usamos ninguna:
<script type='text/javascript' charset='utf-8'>
window.onload = function(){ VideoJS.setup(); }
</script>

Por último, añadimos la hoja de estilo ya sea desde un archivo:

<link rel='stylesheet' href='URL_video-js.css' type='text/css' media='screen' title='Video JS' charset='utf-8' />

o agregando directamente las propiedades entre etiquetas </style> y </style>

No voy a mostrar el CSS porque es un poco largo pero está muy bien documentado (en inglés), explicando qué es cada cosa así que, con paciencia y cuidado, puede llegar a modificarse por completo.

¿Cómo lo usaremos? Hay varias formas, la más simple para una archivo de formato OGG sería algo así:

<div class="video-js-box">
<video class="video-js" width="ANCHO" height="ALTO" poster="URL_imagen" controls preload>
<source src="URL_video" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>

Si usáramos otro formato deberíamos cambiar la etiqueta source y, eventualmente, podríamos poner varios de ellos para que el navegador decida cuál usar:

<div class="video-js-box">
<video class="video-js" width="ANCHO" height="ALTO" poster="URL_imagen" controls preload>
<source src="URL_video.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="URL_video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="URL_video.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
</div>

Por ahora, como la mayoría de estas cosas, no funcionará en Internet Explorer hasta que salga la versión 9 así que, para ese navegador y para cualquier otro que no soporte el formato elegido, podríamos agregar el archivo de Flash, una imagen o texto de advertencia, etc:

<div class="video-js-box">
<video class="video-js" width="ANCHO" height="ALTO"  poster="URL_imagen" controls preload>
<source src="URL_video.ogg" type='video/ogg;  codecs="theora, vorbis"'>
<source src="URL_video.mp4" type='video/mp4;  codecs="avc1.42E01E, mp4a.40.2"'>
<source src="URL_video.webm"  type='video/webm; codecs="vp8, vorbis"'>
<object class="vjs-flash-fallback" width="ANCHO" height="ALTO" type="application/x-shockwave-flash" data="URL_archivo"> ....... </object>
</video>
</div>

<div class="video-js-box">
<video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"'>
<embed class="vjs-flash-fallback" width="640" height="294" src="http://blip.tv/play/AYHp%2BzAC" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>
<p class="vjs-no-video">
<strong>Descargar Video: </strong>
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a> | 
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a> | 
<a href="http://video-js.zencoder.com/oceans-clip.ogg">Ogg</a>
</p>
</div>

Si bien todo esto es nada más que una puerta entrreabierta al futuro, ese futuro no es tan lejano; la velocidad de los cambios apabulla y se vienen tiempos de cambios brutales. Hay una evidente pelea de negocios entrecruzados pero los grandes están impulsando con fuerza estas nuevas tecnologías y eso, a la larga, nos beneficiará a todos, dándonos lo único que realmente necesitamos: alternativas de donde elegir. En el surtido está el gusto pero la diversidad tambien es escencial a la la libertad.

En la práctica, aún es complejo porque no es sencillo alojar ese tipo de archivos aunque ya hay sitios como Vimeo o Blip.TV que aceptan algunos de ellos y nos permiten enlazarlos de manera directa. Algo similiar nos ofrece TinyVid donde podemos encontrar videos en formato OGG o, si creamos una cuenta gratuita, podemos subirlos en cualquier formato y convertirlos, incluyendo videos de YouTube, Vimeo, Dailymotion y otros servicios; no será lo ideal ya que se limita la cantidad de veces que pueden ser vistos por dia (500) pero, es una alternativa viable para experimentar a gusto.