Tabla de contenidos
Los temas que se tratan en este capítulo están relacionados con la inclusión de recursos multimedia en los documentos HTML. Estos recursos pueden ser archivos de audio (canciones, grabaciones, podcasts, etc.) y archivos de video (filmaciones, videos musicales, etc.); también se trata sobre la inclusión de scripts para la animación de las páginas por medio de banners o propaganda, y por medio de la animación de imágenes del documento HTML.
Se pueden agregar recursos multimedia a los documentos HTML como archivos de sonido y video.
Suponga que tiene un archivo de audio en formato MP3 y lo ha subido a una carpeta de su servidor Web y quiere incluirlo en su página Web para que lo escuchen las personas que la visiten. Suponga que este archivo tiene la ruta http://example.com/music/myband.mp3. La forma más simple de hacer disponible este archivo de forma directa es crear un enlace a esta ruta en el documento, así:
Ejemplo 4.1. Enlace a archivo de audio en MP3
Esta es <a href="http://example.com/music/myband.mp3" type="audio/mpeg">mi canción favorita</a>.
Sin embargo, es mejor crear una lista de reproducción en formato M3U (un archivo de texto con las rutas de las canciones). Esto facilita que se comience a reproducir la canción sin esperar a que se descargue completamente el archivo con el audio. En este caso, luego de tener el archivo M3U se puede hacer el enlace así:
Ejemplo 4.2. Enlace a archivo de audio en MP3 utilizando una lista de reproducción
Esta es <a href="http://example.com/music/myband.m3u" type="audio/x-mpegurl">mi canción favorita</a>.
Asimismo se pueden utilizar archivos WAV, MIDI, AAC, OGG y otros formatos de audio utilizando un enlace directo o una lista de reproducción. Dependiendo del navegador y del sistema operativo del computador, se abrirá un reproductor adecuado para el tipo de formato utilizado.
También se pueden cambiar las rutas si los archivos se
encuentran en el mismo servidor de nuestra página Web. Por ejemplo, la
lista de reproducción con el archivo de audio puede ser enlazada así:
href="audio/myband.m3u".
Es importante utilizar el atributo type del enlace
con el valor adecuado de acuerdo al tipo de archivo utilizado. Este
valor corresponde al tipo MIME del recurso. Para el caso de archivos
MP3, el tipo MIME es audio/mpeg, mientras que para la lista de
reproducción en formato M3U el tipo MIME es audio/x-mpegurl.[3]
Es posible agregar videos a una página Web en HTML. Se pueden agregar de la misma manera que se agregaban archivos de audio al documento: a modo de enlaces. En este orden de ideas, primero hay que tener el video en formato AVI, MPEG, MP4, WMV, 3GP u otro formato propio de video, disponible desde un servidor Web que permita encontrar el video directamente, ya sea utilizando una ruta completa (en el caso de no encontrarse en el mismo subdominio de la página), o una ruta relativa (si el archivo está en el mismo subdominio de la página).
En el caso de los videos, no hay listas de reproducción, de forma que se enlaza a los videos directamente, así:
Ejemplo 4.3. Enlace a archivo de video en formato MPEG
Esta es <a href="http://example.com/video/myvideo.mpeg" type="video/mpeg">mi video favorito</a>.
Hay que fijarse de nuevo en la ruta del video y en el tipo MIME del archivo con el video. En el ejemplo anterior, el video está en formato MPEG, por tanto, el tipo MIME es video/mpeg.
Hoy en día, los videos pueden ser demasiado pesados para subir en un servidor Web y luego para descargarlos y visualizarlos en el navegador de nuestros visitantes, de forma que hay servicios especializados que permiten publicar nuestros videos en un formato más accesible y sencillo, de forma que no se tarde tanto comenzar la reproducción de video. Estos servicios son por ejemplo YouTube, Vimeo, DailyMotion, Metacafe y otros.
Si se tiene disponible una cuenta con alguno de estos servicios, es posible ver estos videos públicamente, y mejor aún, es posible utilizar incluir un fragmento de la página como nuestro video en ese servicio. Por ejemplo, en YouTube, al visualizar un video se muestra información para incluirlo en una página Web en HTML, copiando un código en HTML como este:
Ejemplo 4.4. Fragmento de código HTML para incluir un video de YouTube
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/j8WP7aOD_9Q&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/j8WP7aOD_9Q&hl=en&fs=1"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="425" height="344">
</embed>
</object>
Este fragmento de código se vería como aparece en la Figura 4.1, “Video insertado desde YouTube en un documento HTML” en un navegador Web. Básicamente se inserta en la página un pequeño reproductor en Adobe Flash para el video ya existente en el servicio de YouTube (puede ser otro servicio), no es el video original como tal.
[3] Se puede consultar un listado más completo de tipos MIME en la dirección en Internet http://www.utoronto.ca/webdocs/HTMLdocs/Book/Book-3ed/appb/mimetype.html.