SONIDO Y VÍDEO

|Introducción| |Head| |Body| |Formato| |Cabeceras y Párrafos| |Fuentes| |Líneas| |Listas| |Imágenes| |Enlaces| |Marquesina|
|Sonido y Vídeo| |Mapas Gráficos| |Tablas| |Marcos| |Formularios| |Estilos| |Capas y Applets| |Caracteres especiales|

Sonido

Por fín hay algo en lo que se han puesto de acuerdo los dos navegadores mayoritarios.

En el Explorer sigue existiendo una etiqueta antigua que no funciona con el Netscape. Hace que suene música de fondo pero no podemos hacer nada para pararlo (bueno sí, en el "detener" de la barra de herramientas del navegador). La etiqueta es <BGSOUND> (background sound) que obligatoriamente lleva como atributo SRC (source) con el nombre y dirección del archivo de sonido (mid, wav, au, mp3, mod, ra,...)

<BODY>
<BGSOUND SRC="londres.mid">
</BODY>

Pulsa aquí para comprobarlo.

Otros atributos son LOOP que es el número de veces que se ejecuta la musiquilla (por defecto es 1 mientras infinite o -1 es para todo el rato), BALANCE que determina el balance del sonido entre los dos altavoces del equipo y cuyos valores pueden estar entre -10000 y +10000 ( el 0 es el equilibrio) y el VOLUME que fija el volumen (entre -10000 mínimo y 0 máximo).

<BODY>
<BGSOUND SRC="londres.mid" LOOP="3" BALANCE="+10000" VOLUME="0">
</BODY>

Pulsa aquí para comprobarlo.

La etiqueta buena, que creó Netscape y que también ahora funciona con el otro es <EMBED>. También lleva SRC como la otra y permite más manipulación. Parece ser que con Netscape primero tiene que conectarse a la Red y descargarse unos archivitos (plug-ins) para que funcione correctamente. En cambio, con Explorer va como la seda.

<BODY>
<EMBED SRC="londres.mid">
</BODY>

Sin atributos se reproduce una vez y aparece una consola con botones que nos permite parar, volver a empezar, pausar, etc.

Pulsa aquí para comprobarlo.

Los atributos son más variados: WIDTH y HEIGHT para el tamaño de la consola, AUTOSTART con valores true para que se inicie la música al entrar en la página, es decir, sin intervención nuestra y false para que espere a que le demos al play.

<BODY>
<EMBED SRC="londres.mid" AUTOSTART=false>
</BODY>

Pulsa aquí para comprobarlo.

Luego queda LOOP (número de veces que sonará) que si lleva como valor true (ininterrumpido) y false (una sola vez) funcionan bien con ambos; pero si lleva un valor numérico sólo funciona con Netscape mientras que con Explorer tendremos que poner el atributo PLAYCOUNT con su número.

<EMBED SRC="londres.mid" PLAYCOUNT=3>

Tenemos HIDDEN que hace que se esconda la consola (true y false).

<BODY>
<EMBED SRC="londres.mid" HIDDEN=true>
</BODY>

Pulsa aquí para comprobarlo.

Tenemos TYPE para definir el tipo de archivo (audio/midi, audio/wav, audio/mp3,...); VOLUME con valores entre 0 y 100 (el valor por defecto es 50); ALIGN (top, bottom, center, baseline, left, right, texttop, middle, absmiddle y absbotom) para alinear texto con respecto a la consola y esta a derecha o izquierda (funciona como en las imágenes) y HSPACE y VSPACE, también análogos a los de las imágenes.

<BODY>
<EMBED SRC="londres.mid" AUTOSTART=false ALIGN=right>
</BODY>

Pulsa aquí para comprobarlo.

También podemos poner un enlace que, al pulsarlo, se inicie el sonido en cuestión. Se abrirá el programa que tengas para poder escucharlo (windows Media,...).

<BODY>
Pulsa <A HREF="londres.mid"> aquí </A> para escuchar música.
</BODY>

Pulsa aquí para escuchar música.

Existe un problema y es que si queremos tener música de fondo cuando alguien entre en nuestra página (sin intervención de usuario, es decir, sin que se vea la consola), al cambiar de página vuelve a empezar, en vez de continuar. Compruébalo:

Pulsa aquí y, dentro de ella, pulsa en el enlace que te ofrezco.

Para solucionarlo podemos hacer marcos y situar la etiqueta de sonido en el que está siempre visible o crear un marco de tamaño 0 (no se verá) y ponerla allí (ya veremos los marcos más adelante). Por cierto, sólo lo he logrado con la etiqueta de Explorer BGSOUND pero no con EMBED

Pulsa aquí...

Vídeo

Los formatos de vídeo más comunes hoy día son avi y mpg (o mpeg) pero existen además otros como mov o qt (de Quick Time), wmv,...

La etiqueta <IMG> puede usarse para meter víedo en nuestras páginas. En este caso presenta los atributos DYNSRC que especifica la localización del fichero; LOOP con valores numéricos (además de infinite, el valor por defecto es 1) y START con valores fileopen (al entrar se ejecuta) o mouseover cuando se pase el ratón sobre él. No funciona con Netscape.

<IMG DYNSRC="video.avi" START=mouseover>

Otra etiqueta es <EMBED> (en algunos sitios aparece también su cierre </EMBED>) que es la misma que en el audio y también da problemas en Netscape porque sale el mensaje de que va a buscar plug-ins.

Sus atributos son muchos. Tenemos SRC, LOOP (true para todo el rato y false para una vez), AUTOSTART, TYPE (video/avi, video/quicktime (.mov), video/mpeg), VOLUME (entre 0 y 100, solo Nets), WIDTH y HEIGHT (tamaño de la consola en píxeles), ALIGN (top, bottom, center, baseline, left, right, texttop, middle, absmiddle, absbotom) y HSPACE Y VSPACE.

<EMBED SRC= "imagenes/video.avi" TYPE="video/avi" AUTOSTART="True" WIDTH="265" HEIGHT=240">

La etiqueta <OBJECT> surgió para que sólo hubiera una pero no resultó y sólo funciona con el Explorer. Es más complicada que las otras por lo que sólo veremos algo por encima, sin muchas explicaciones.

También se usa para audio con los mismos parámetros que vamos a ver ahora. E incluso para imágenes (sólo Netscape):

<OBJECT DATA="imagenes/grande.jpg" TYPE="image/jpg"> </OBJECT>.

Los atributos: CLASSID es un numerajo largo de varia según el tipo de video, CODEBASE es la dirección de internet del objeto o componente externo necesario para reproducir el fichero, TYPE, WIDTH, HEIGHT, ALIGN, HSPACE, VSPACE, AUTOSTART y STANDBY que presenta en pantalla un mensaje mientras el fichero se carga.

También existen paramentros (PARAM), los más comunes son:
- PARAM NAME="filename" value="nombre y ruta",
- PARAM NAME="showcontrols" value="1/0", que fija si se debe de ver (valor por defecto) o no la barra inferior de controles de la consola de vídeo (Sólo Explorer),
- PARAM NAME="showdisplay" value="1/0", que fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con información sobre el fichero (Sólo Explorer),
- PARAM NAME="showstatusbar" value="1/0", que fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con información temporal sobre la visualización del vídeo y sobre su sonido (Sólo Explorer),
- PARAM NAME="autosize" value="1/0", que indica si el tamaño de la consola se fija o no de forma automática (sólo Explorer),
- PARAM NAME="autostart" value="true/false" que ya conocemos.

Y el código monstruoso:

<BODY>
<OBJECT WIDTH="265" HEIGHT="240" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="filename" value="imagenes/video.avi">
<param name="showcontrols" value="0">
<param name="showdisplay" value="0">
<param name="showstatusbar" value="0">
<param name="autosize" value="0">
<param name="autostart" value="1">
</OBJECT>
</BODY>

Para poner vídeos que vayan bien con ambos navegadores lo mejor es combinar varias de las cosas que se han visto aquí y,... cruzar los dedos.

Con la misma etiqueta y atributos, cambiando los numerajos de CLASSID se pueden incrustar también archivos hecho con Flash (swf) y presentaciones tipo PowerPoint.

<BODY>
<OBJECT width="265" height="240" classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000">
<codebase ="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="334" height="425">
<param name="movie value" value="loquesea.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#aabb00">
<EMBED SRC="loquesea.swf" quality=high pluginpage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="206" height="406">
</EMBED>
</OBJECT>
</BODY>

Lo mejor creo que va a ser usar un programa como Dreamweaver que incrusta objetos flash automáticamente generando códigos como este (que, por cierto, no se si funciona).

Para PowerPoint es igual de complejo (ppt,ppz,pps y pot):

<BODY>
<OBJECT width="265" height="240" classid="CLSID:EFBD14F0-6BFB-11CF-9177-00805F8813FF">
<param name="file" valuetype="ref" value="file:loquesea.ppt">
<EMBED SRC="loquesea.ppt" border=0 width="334" height="425">
</EMBED>
</OBJECT>
</BODY>

También, en este caso, es mejor guardar la presentación como página web y ver qué pasa.