Siempre hay ocasiones en las que es necesario insertar un video o un fichero de audio para que se reproduzca de forma integrada en la web sin neesidad de descargarlo a tu disco duro y abrirlo con tu reproductor habitual.
Hasta ahora esto se ha hecho siempre mediante la inserción de macros a través de la etiqueta html iframe o mediante un reproductor flash. Esto tiene dos inconvenientes:
El primero de ellos es que para que todo cuadre en la web. El que lo inserta debe saber el suficiente html para que ajuste el tamaño a la proporción adecuada de tal forma que todo se ajuste a la maqueta como debería.
El segundo de los inconvenientes es que la inserción de macros siempre es un problema en cuanto a seguridad, ya que se está cargando contenido de otra web en la nuestra, lo cual puede provocar que nuestra web sea portadora de virus si no se utiliza con cuidado.
El flash por su parte, en función de los navegadores, puede generar graves problemas de rendimiento (Especialmente en Internet Explorer). Además del hecho de que no es posible reproducir flash en ciertos dispositivos, como los de Apple, enórmemente extendidos ha día de hoy.
En el caso de que la web no esté pensada para ser visualizada en dispositivos móviles o tablets, en principio, de esta forma se puede obtener un reproductor de audio o de video muy facilmente. A continuación vemos unos ejemplos de cómo insertar videos flv en la web con un reproductor flash,
<object type="application/x-shockwave-flash" data="http://flv-player.net/medias/player_flv.swf" width="300" height="220">
<param name="movie" value="http://flv-player.net/medias/player_flv.swf" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="flv=http://www.miweb.es/video.flv" />
</object>
Con este código cargaremos un reproductor de video flash que nos permitirá ver videos flv en nuestra web insertándolo allí donde queramos que se reproduzca el video. Sin embargo, los sitios como youtube o vimeo, no permiten reproducir los videos de forma directa a traves del reproductor flash, porque ya tienen su propio sistema. En estos casos, debemos, o bien insertar diréctamente le código iframe que nos ofrece youtube o vimeo para que todo funcione corréctamente ajustando los parámetros de anchura y altura del iframe que nos dan para que cuadre en donde lo queramos poner. A continuación se muestra un ejemplo de youtube:
<iframe width="560" height="315" src="http://www.youtube.com/embed/bxP0VnbHSxE" frameborder="0" allowfullscreen></iframe>
Existe una alternativa que, aunque tambien pasa por los iframes, facilita mucho la labor para alguien que no sabe HTML. Tanto Youtube como Vimeo, tienen un código asociado a cada uno de sus videos que acompaña a la url mediante parámetros get. De cara al porgramador es algo más laborioso, porque debe procesar el enlace por php, extraer el código citado de youtube o vimeo, y acoplarlo a un enlace de tipo embed de la web que corresponda (Youtube o Vimeo). Básicamente, se trata de montar nuestro propio iframe sabiendo cual es el formato de los enlacess embed de Vimeo y de Youtube, los cuales podemos ver facilmente en los iframes para insertar un video que nos proporcionan dichas webs.
En el caso del audio, tambien se usa un código flash que carga el reproductor instalado por defecto en nuestro navegador. El más utilizado suele ser Windows media player, debido a al gran expansión de los sistemas operativos Windows.
Etiquetas audio y video de HTML 5
En HTML 5 tenemos la posibilidad de reproducir audio y video diréctamente mediante el uso de las etiquetas audio y video.
La etiqueta Audio
Nos permite insertar un fichero de audio con un reproductor en nuestra web, que nos permitira escucharlo sin necesidad de tener instalado ningún programa adicional para dicho fin. Un ejemplo de sintaxis de esta etiqueta sería el siguiente:
<audio src=”audio.mp3″ type=”audio/mp3″ controls autoplay />
A continuación se expone una breve descripción de algunos de los atributos disponibles para esta etiqueta.
src. Indica la ruta del archivo a reproducir.
autoplay. Permite que la reproducción comience de forma automática sin previo aviso. En ocasiones no se recomienda su uso para dejar que el usuario decida cuando reproducir audio cuando lo desee.
autobuffer. Nos permite cargar de forma automática el archivo para que sea más rápida su reproducción a posteriori y reducir aí tiempos de espera para el usuario.
width y height. Definen respectivamente la anchura y la altura que deberaá tener la etiqueta de audio.
loop. Ejecuta la reproducción en bucle de forma que al finalizar vuelve a empezar.
controls. Muestra los controles de reproducción.
type. Define el tipo de archivo a reproducir y su extensión (video, audio...)/(mp3, ogg...).
La etiqueta Video
En el caso de la etiqueta de video, atributos son muy similares a los de la etiqueta audio. Aquú un ejemplo de su sintáxis.
<video src=”video.ogg”>
<!– Código a mostrar en navegadores que no soportan HTML 5 –>
</video>
Para más información podéis consultar este enlace.
El inconveniente de utilizar estas etiquetas es que hay navegadores que no soportan corréctamente todas las funcionalidades de html5 y por ese motivo no se utilizan todavía de forma habitual.
Comentarios