Ing.

Jos Alfredo Snchez Paradigmas de Programacin Multimedia con HTML5

Elemento audio de HTML5 Algunos elementos nuevos sirven para integrar contenido multimedia, pues sabemos que cada da esos nuevos tipos de informacin estn ms presentes en la Web. audio: Para insertar sonido dentro de una web. video: Para insertar clips de vdeo. embed: Para embeber contenido externo de otro tipo, como el trado de diversos plugins que se comercializan actualmente o se comercializarn en el futuro. source: Permite especificar varias fuentes diferentes cuando se insertan elementos en AUDIO y VDEO. track: Permite especificar varias pistas de sonido o vdeo para los elementos AUDIO y VDEO. Estas nuevas etiquetas audio forman parte de la especificacin de HTML5 y permiten embeber (o empotrar) archivos de audio en desarrollos web sin necesidad de utilizar plugins adicionales como el tan incordiante Flash. El nuevo elemento permite el uso de diferentes formatos de archivo puesto que los formatos que soportan los diversos navegadores no son parte del estndar sino que dependen de la implementacin de cada fabricante. Esta tabla sirve para comprobar que formatos soportan los navegadores ms usados de forma nativa:

Tanto en el navegador Safari como en Chrome, algunos formatos dependen de Quicktime y ffmpeg respectivamente. Chrome realmente no soporta todos los formatos de forma nativa, tan solo Vorbis y MP3, por el contrario, si se compila Chromium (versin libre de Chrome) con soporte para ffmpeg si estarn disponibles todos esos formatos de forma nativa a travs de ffmpeg, de ah la cursiva en la tabla. Cdigo de insercin? Incorporar un archivo de audio en HTML5 es muy simple: <audio src="archivo.mp3"> </audio> Como sucede con las etiquetas de HTML5 lo que se encuentre entre las etiquetas audio solo ser tenido en cuenta por navegadores que soporten la nueva etiqueta. Obviamente, el ejemplo anterior es extremadamente simple, la etiqueta audio ofrece ms posibilidades. Por ejemplo, se puede lograr que una pginas sea detestada por la mayora de personas que acceden a ella si se embebe un archivo de audio que se autorreproduzca por s mismo, mediante el parmetro del ejemplo mostrado seguidamente: <audio src="archivo.mp3" autoplay> </audio> El atributo autoplay es un atributo booleano y por lo tanto no necesita de un valor, sin embargo si se ha de escribir cdigo XHTML se puede usar autoplay="true". Si la gente que visita el sitio web an no ha decidido salir corriendo por el autoplay siempre se puede hacer "ms divertido" utilizando adems el atributo loop para que se reproduzca en bucle: <audio src="archivo.mp3" autoplay loop> </audio>

Controles Si no se aspira a desacreditar ms el sitio web en cuestin, con los bucles de audio autorreproducidos sin posibilidad de pausa, siempre se puede ofrecer al usuario que navega por el sitio web unos controles bsicos para el elemento audio: <audio src="archivo.mp3" controls> </audio> El atributo controls hace que el navegador proporcione una interfaz con controles para la reproduccin y el control del volumen de forma nativa. Los controles del navegador pueden ser suplantados por controles propios usando JavaScript a travs de una API que proporcione mtodos para controlar todos los aspectos de la reproduccin del archivo de audio: <audio id="player" src="archivo.mp3"> </audio> <div> <button onclick="document.getElementById('player').play();">Reproducir</button> <button onclick="document.getElementById('player').pause();">Pausa</button> <button onclick="document.getElementById('player').volume += 0.1;">Subir Volumen</button> <button onclick="document.getElementById('player').volume -= 0.1;">Bajar Volumen</button> </div> Buffer Si se requiere que el archivo de audio sea precargado en segundo plano por el navegador, se puede usar el atributo preload que puede tomar tres posibles valores: none, auto y metadata. El navegador Safari precarga los archivos de audio por defecto, usando preload="none" se garantiza que eso no ocurra en aquellos contextos en los que no es necesario que el navegador precargue los archivos, por ejemplo, cuando existen muchos archivos en una misma pgina: <audio src="archivo.mp3" preload="none"> </audio> Si solo se dispone de un archivo de audio en la pgina, es adecuado usar preload="auto". Especificar ms de un formato de archivo a la vez Aunque el formato MP3 est ampliamente extendido desde hace muchos aos, no es un formato abierto y est ligado a patentes. Las tecnologas que decodifican archivos MP3 deben pagar una tasa por la patente. Eso es posible para grandes empresas como Apple, Microsoft o Google, pero no lo espara los grupos de cdigo abierto y software libre o las empresas pequeas. Safari, IE y Chrome puede reproducir archivos MP3 sin problemas, sin embargo ese no es el caso de Firefox y de Opera (aunque Opera puede a travs de ffmpeg). Existen otros formatos abiertos como Vorbis que no requieren de patentes para ser utilizados. Firefox, Opera y Chrome lo soportan de forma nativa, IE y Safari no. Adems, existe una forma de definir ms de un archivo de audio en diferentes formatos utilizando nicamente una etiqueta audio para ello. En lugar de usar el atributo src en la etiqueta de apertura, se pone la etiqueta source para poder definir mltiples archivos: <audio controls> <source src="archivo.ogg" type="audio/ogg" /> <source src="archivo.mp3" type="audio/mpeg" /> </audio> Los navegadores que puedan reproducir archivos Ogg Vorbis no buscarn ms all de la primera etiqueta source mientras que los que no lo soporten, avanzarn hasta la siguiente etiqueta. De esta manera se pueden considerar las necesidades de todos los usuarios sin discriminar a ningn navegador. Aunque el atributo type no es obligado, siempre es conveniente utilizarlo y ayudar a los navegadores. El elemento source es un elemento standalone as que si se est usando sintaxis XHTML se puede utilizar la etiqueta tal y como se comprueba en el ejemplo.

Cmo incluir videos con HTML5? La inclusin de videos en los sitios Web es uno de los procesos en constante evolucin dentro de la maquinaria de los navegadores, desde aquellos videos cargados en un reproductor arcaico mediante un plug-in, hasta la actualidad donde la mayora 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 requeran de la instalacin de un plug-in que permita al navegador cargar un reproductor en el interior de la pgina web y empezar a reproducir los videos que habas cargado con anticipacin en tu servidor. Como siempre y para no perder la costumbre, existe una guerra entre fabricantes de navegadores sobre que formato de vdeo debe de ser el estndar para la nueva especificacin y por supuesto no todos reproducen los mismos formatos de forma nativa.

Mediante unas cuantas lneas de cdigo podas incluir en tu sitio el video de tu eleccin para que los internautas pudieran verlo, siempre y cuando tu proveedor de hosting te lo permitiera. Las nicas condiciones que debas cumplir en aquel entonces era que el formato del video deba 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 incursin al mercado de sitios de carga de videos y social media como Youtube, la tendencia empez a inclinarse ms por la reproduccin de videos mediante el uso de archivos Flash, los cuales permitan un poco ms 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 ms que nada en una cuestin de copiar y pegar cdigo de las pginas donde habamos alojado nuestro video. Con HTML5 se piensa dar de nuevo un giro a favor del cdigo fuente, recurriendo a un nuevo elemento para reproducir el vdeo. HTML5 nos ofrece una manera prctica y fcil de agregar los vdeos en nuestro cdigo 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 basndose en los estndares 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 pelcula cargue automticamente sin necesidad de pulsar el botn play, width y height ut ilizados para dar dimensin al cuadro de reproduccin, y poster que da la oportunidad al desarrollador de incluir la imagen que quiere que se muestre en el cuadro de vdeo antes de que este se reproduzca. Es entonces que si tenemos la siguiente lnea de cdigo: <video controls autoplay width="800" height=600 poster=imagen.png> Con esto indicamos que nuestro video desplegar los botones del reproductor, se reproducir automticamente 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 tambin tendr atributos, uno de ellos es src para establecer la ruta donde se encuentra almacenado nuestro vdeo y el otr o es type para definir la extensin 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 ms 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 vdeo, 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 opcin 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 estndares de la W3C tambin existen discrepancias, para ello es bueno conocer que formatos son aceptados por cada bando. Desgraciadamente Firefox, Chrome y Safari, los grandes impulsores del HTML5 an siguen teniendo algunas diferencias en el terreno de la multimedia, tanto para audio como para vdeo no han establecido un estndar 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 vdeos para reproducir. Qu hacer entonces?, la respuesta puede ser mucho ms sencilla de lo que pensbamos, 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 vaco. Sobre la base de esto, establecemos el cdigo 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 ms actual, intenta con Firefox o Google Chrome</span> </video> Descargar un navegador ms actual, intenta con Firefox o Google Chrome. Como podemos observar se agrego una lnea de cdigo despus de las tres opciones, la cual contiene un mensaje que invita a descargar un nuevo navegador. Este texto puede ser agregado solo como precaucin, y aparecera en el remoto caso de que alguien no pueda reproducir el archivo de Flash. Este texto tambin 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 disposicin algn formato de los tres requeridos. Con estas lneas basta para poder agregar el vdeo en nuestro sitio, existe una gran posibilidad de poder editar el estilo de dichos reproductores en un futuro, ya sea con CSS3 o con algn atributo del mismo elemento, recordemos que HTML5 an se encuentra en estado de prueba y por lo mismo se encuentra en constante evolucin.