La inclusión de videos en los sitios Web es uno de los procesos en constante evolución dentro de la maquinaria de los navegadores, desde aquellos videos cargados en un reproductor arcaico mediante un plug-in, hasta la actualidad donde la mayoría recurre a archivos .flv cargados en streaming.
Windows Media Player, Quicktime y Real Player, fueron de las primeras propuestas serias, claras y relativamente sencillas para incluir videos en los portales de Internet. Estas opciones requerían de la instalación de un plug-in que permitía al navegador cargar un reproductor en el interior de la página web y empezar a reproducir los videos que habías cargado con anticipación en tu servidor.
Mediante unas cuantas líneas de código podías incluir en tu sitio el video de tu elección para que los internautas pudieran verlo, siempre y cuando tu proveedor de hosting te lo permitiera.
Las únicas condiciones que debías cumplir en aquel entonces era que el formato del video debía ser el que el reproductor demandaba, y claro que el video no fuera muy pesado, porque las conexiones a Internet no eran de gran velocidad.
Con la incursión al mercado de sitios de carga de videos y “social media” como Youtube, la tendencia empezó a inclinarse más por la reproducción de videos mediante el uso de archivos Flash, los cuales permitían un poco más de flexibilidad para los desarrolladores y un tiempo de carga relativamente menor.
Fue entonces que el hecho de incluir videos en un sitio Web se convirtió más que nada en una cuestión de copiar y pegar código de las páginas donde habíamos alojado nuestro video. Con HTML5 se piensa dar de nuevo un giro a favor del código fuente, recurriendo a un nuevo elemento para reproducir el vídeo.
HTML5 nos ofrece una manera práctica y fácil de agregar los vídeos en nuestro código para lograr desplegarlos en nuestro sitio. Sin necesidad de recurrir a sitios externos podemos cargar en nuestro propio servidor el archivo y montarlo en el sitio mediante el uso de la etiqueta <video>, elemento que creará un reproductor basándose en los estándares del navegador que estemos utilizando.
El elemento se encuentra estructurado por varios atributos a los cuales podemos recurrir para personalizar nuestro reproductor. Entre estos se encuentra el atributo “controls” utilizado para desplegar los botones, play/pause y stop de nuestro reproductor, el atributo “autoplay” utilizado para que la película cargue automáticamente sin necesidad de pulsar el botón play, “width” y “height” utilizados para dar dimensión al cuadro de reproducción, y “poster” que da la oportunidad al desarrollador de incluir la imagen que quiere que se muestre en el cuadro de vídeo antes de que este se reproduzca.
Es entonces que si tenemos la siguiente línea de código:
<video controls autoplay width="800" height=”600” poster=”imagen.png”>
Con esto indicamos que nuestro video desplegará los botones del reproductor, se reproducirá automáticamente al momento de cargarse, en una pantalla de 800 por 600 pixeles y que antes de ser reproducido mostrará el archivo “imagen.png” como poster frame.
El elemento <video> tendrá un hijo el cual recibe el nombre de <source>, esta etiqueta también tendrá atributos, uno de ellos es “src” para establecer la ruta donde se encuentra almacenado nuestro vídeo y el otro es “type” para definir la extensión y el tipo de nuestro archivo.
<source src="video.ogg" type="video/ogg" />
Es entonces que la estructura final del elemento queda de la siguiente manera:
<video controls autoplay width="800" height=”600” poster=”imagen.png”>
<source src="video.ogg" type="video/ogg" />
</video>
Aunque el elemento <video> es una herramienta de gran potencial y sencillez, desafortunadamente no es interpretada por navegadores viejos, ni por el famoso dolor de cabeza llamado Internet Explorer, que como sabemos sigue siendo el navegador más utilizado por los usuarios de Internet, por lo que es bastante probable que alguien acceda a nuestro sitio mediante su uso.
Debemos ofrecer alternativas a nuestros visitantes si queremos empezar a utilizar HTML5 en nuestro sitio. En el caso del vídeo, basta con agregar el mismo archivo en formato flash para que actué como emergente, si el navegador no llega a interpretar nuestro elemento utilizará el reproductor flash que es la segunda opción que le daremos.
Es así como llegamos a abarcar el mayor rango de navegadores actualizados y navegadores obsoletos, ahora debemos tener en cuenta que entre los navegadores que cumplen con los estándares de la W3C también existen discrepancias, para ello es bueno conocer que formatos son aceptados por cada bando.
Desgraciadamente Firefox, Chrome y Safari, los grandes impulsores del HTML5 aún siguen teniendo algunas diferencias en el terreno de la multimedia, tanto para audio como para vídeo no han establecido un estándar en el formato a utilizarse.
Firefox vive apegado al formato .ogg y únicamente el uso de este en nuestro elemento lo hará feliz, mientras que Safari y el relativamente nuevo chico del barrio, Google Chrome, prefieren optar por el formato .mp4 al momento de recibir vídeos para reproducir.
¿Qué hacer entonces?, la respuesta puede ser mucho más sencilla de lo que pensábamos, basta con crear un listado con todos los archivos en los distintos formatos (.ogg para Firefox, .mp4 para Chrome/Safari y .swf para navegadores viejos) dentro de tu etiqueta video, y no omitir alguno de ellos, ya que si el navegador interpreta el elemento <video> y no encuentra el formato de su preferencia simplemente desplegará un reproductor vacío.
En base a esto, establecemos el código de la siguiente manera:
<video controls width="800"> <source src="video.ogg" type="video/ogg" /> <source src="video.mp4" type="video/mp4" /> <embed src="http://urldelvideo/flash.swf" type="application/x-shockwave-flash" width="800" height="600"></embed> <span>Descargar un navegador más actual, intenta con Firefox o Google Chrome</span> </video>
Descargar un navegador más actual, intenta con Firefox o Google Chrome.
Como podemos observar se agrego una línea de código después de las tres opciones, la cual contiene un mensaje que invita a descargar un nuevo navegador. Este texto puede ser agregado solo como precaución, y aparecería en el remoto caso de que alguien no pueda reproducir el archivo de Flash.
Este texto también puede ser utilizado en lugar de cualquiera de las tres opciones anteriores, aunque no se recomienda, al menos que quieras dejar en claro que en tu sitio únicamente se usa HTML5, o simplemente no tienes a disposición algún formato de los tres requeridos.
Con estas líneas basta para poder agregar el vídeo en nuestro sitio, existe una gran posibilidad de poder editar el estilo de dichos reproductores en un futuro, ya sea con CSS3 o con algún atributo del mismo elemento, recordemos que HTML5 aún se encuentra en estado de prueba y por lo mismo se encuentra en constante evolución.
