10.

Video y sonido (I)

10.1 Enlaces multimedia

Multimedia en navegadores.

Los navegadores no están diseñados en principio para reproducir archivos de audio y video,
sin embargo normalmente pueden reproducir los tipos de archivo más habituales, gracias a
unos programas o aplicaciones que tienen incrustados los navegadores, llamados "plugins".
algunos de estos plugins se instalan junto con el navegador, otros podemos instalarlos o
actualizarlos más adelante.

No todos los navegadores tienen los mismos plugins, y además estos pueden estar activados
o desactivados. Con lo que cada usuario tendrá configurado el navegador de forma distinta.
Por tanto, al poner un archivo de sonido o de video en una web, es muy posible que éste no
se vea igual en todos los navegadores, incluso que en algunos no se vea.

Formatos de archivo de Audio y video.

Principales formatos de audio

  .wav : Formato típico de la casa windows, de elevada calidad. su principal
inconveniente es la gran cantidad de espacio que ocupa, con lo que suele utilizarse
para reproducir ruidos o frases cortas.
 .au : (Audio File format): formato creado por la casa Apple para plataformas MAC.
 .mid : formato MIDI. Son sonidos creados por ordenador, por lo que no pueden ser
grabaciones de sonidos reales como música grabada o voces. Su principal ventaja es
su pequeño tamaño, por lo que es muy usado en la web.
 .mp3 (MPEG 1 Layer 3) : Es sin duda el más usado para sonidos grabados de
duración media o larga. (canciones, mas de una frase, etc.) ya que permite una
buena calidad y un tamaño hasta 10 veces inferior al del fichero .wav.
 .rmp ; Real Audio : También puede tener extensión .ra. De calidad media, hace
falta tener instalado el plugin Real Audio.

Sin duda los más usados son .wav, .mid y .mp3.

Principales formatos de vídeo

 .avi : el formato AVI (Audio Video Interleave) tiene un funcionamiento muy

simple, pues almacena la información por capas, guardando una de vídeo seguida
por una de audio. Tiene una alta compresión. Puede ser reproducido por DirectShow
y Windows Media.
 .wmv : Microsoft Windows Media Vídeo: de la casa Microsoft, funciona con el
Windows Media Player. También con extensión .asf.
 .mov : Apple QuickTime: requieren de un reproductor especial que es el
"Quicktime Player" para visualizarlos. Este reproductor, tiene una versión sencilla
gratuita y una profesional.
 .mp4 .mpg .mpeg : El formato MPEG (Moving Picture Experts Group) es un
standard para compresión de video y de audio.
 .divx : Basado en el formato MPEG, el formato divx tiene un alto grado de
compresión con una alta calidad.

Etiqueta de enlace

La etiqueta de enlace <a href="...">...</a> es una de las más polivalentes, ya que

puede servirnos para insertar audio o video en nuestra página, basta con poner en el atributo
href la ruta del archivo de audio, video, o cualquier otro, que queramos mostrar, con su
extensión. El comportamiento de esta etiqueta ante cualquier tipo de archivo es el siguiente:

 En primer lugar, el navegador intentará abrir el archivo. En principio, sustituyendo a

la ventana que estamos viendo, o tal como le habremos especificado en el atributo
target.
 Si el navegador tiene instalados los plugins que permiten ver el archivo, este se
abrirá.
 Si no tiene instalados los plugins, nos mostrará una ventana que nos indicará qué es
lo que queremos hacer con el archivo: abrirlo o descargarlo.
  Si decidimos abrirlo pueden ocurrir dos cosas, que tengamos ya un programa
predeterminado para ese tipo de archivos, con lo cual el archivo se abrirá en ese
programa; o que no lo tengamos, con lo cual se abrirá un nuevo cuadro, en el cual
podemos buscar el programa con el que queremos abrir el archivo.
 Si decidimos descargarlo, se abrirá un nuevo cuadro en el cual buscaremos el
directorio para guardarlo. por supuesto en cualquier momento también podemos
optar por cancelar la descarga o la apertura mediante el botón "cancelar".

La etiqueta <a href=".."></a> de enlace permite incluir archivos para descargar. Los
archivos comprimidos de WinZip o WinRar se direccionan mediante esta etiqueta para que
los descargue el usuario. También los archivos para descargar programas (extensión .exe)
utilizan esta etiqueta. Al aparecer el cuadro de diálogo de descarga, la página que estamos
viendo no cambia, lo que sí ocurre cuando el navegador puede abrir el archivo.

Abrir el archivo en la propia página.

Como ya se ha dicho, el archivo, por defecto, se abre en una página aparte, esto lo podemos
modificar para que se abra en la propia página mediante un pequeño truco;

 En primer lugar, creamos una ventana mediante la etiqueta iframe. Como se ha

explicado en la página "9.4 Etiqueta iframe", esta etiqueta abre una ventana hacia
otra página.
 Debemos crear la página a la cual enlaza la etiqueta iframe. Esta página estará en
blanco, o como mucho le pondremos un color de fondo para distinguir la ventana
del resto en la página principal.
 A la etiqueta iframe debemos darle un nombre mediante el atributo
name="nombre". También debemos asegurarnos que el ancho y el alto de la ventana
(atributos width y height) son lo bastante grandes como para que quepa el
contenido que queremos mostrar. (en el caso de sonidos, debe caber la consola de
control de sonidos).
 Por último colocamos el enlace, cuya URL es el archivo de sonido o video, y lo
redirigimos mediante la etiqueta target="nombre" hacia la ventana del iframe.

Mediante este sencillo truco podemos insertar en la misma página varios archivos de audio
y video, y abrirlos mediante los enlaces. he aquí un ejemplo:

Insertamos una etiqueta iframe en la página:

<iframe src="#" width="300" height="225" name="video"></iframe>

Después mediante unos enlaces a la etiqueta iframe damos la opción de ver o no ver el
video:

<a href="objetos/misojos.swf" target="video">Ver video</a>

<a href="objetos/pantallablanco.html" target="video">Ver video</a>

Ver video

Parar reproducción

Fíjate que aparte de insertar el archivo de video en la carpeta de "objetos" hemos insertado
también una página en la que ponemos el texto por defecto que se ve cuando no está el
video.

Esta forma de insertar video es muy precaria, ya que no todos los formatos de video son
admitidos por el navegador. Aquí hemos usado el formato .swf que es el usado para hacer
animaciones con flash. (el plugin de flash suelen tenerlo casi todos los navegadores).

Otros formatos de video como .avi o .wmv es probable que no sean admitidos por esta
etiqueta, con lo que si los insertamos es probable que al abrir el enlace nos salga el cuadro
de diálogo para descarga.