Multimedia

Vamos a ver cómo insertar elementos multimedia. En concreto, veremos cómo insertar una animación Flash, un sonido y un vídeo, que son los más empleados. Utilizaremos dos métodos, usando las nuevas etiquetas de HTML 5 y mediante los plug-in.

Películas Flash (SWF)

Las películas Flash son animaciones, cuyo archivo tiene la extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, como banners publicitarios, como botones... Hasta hace pocos años, Flash era uno de los elementos multimedia más empleados en las páginas web, aunque su uso fue decreciendo con la llegada de HTML 5 y el vídeo en mp4. Es importante añadir que el formato de las películas Flash no es soportado por un buen número de dispositivos móviles, como tabletas y smartphones, por lo que no debe ser utilizado en páginas web dirigidas a estos dispositivos.

Estas películas pueden crearse mediante el programa Flash también de Adobe. Para poder ser visualizado en el navegador necesitan que el usuario tenga instalado el plug-in de Flash Player. Su instalación es muy sencilla y normalmente ya viene con el navegador. Sin embargo en los teléfonos móviles y tabletas no ocurre lo mismo ya que Android y Apple no lo incluyen.

El contenido de esta página requiere una versión más reciente de Adobe Flash Player.

Las películas Flash pueden insertarse en una página a través del menú Insertar → Medios, opción Flash SWF, o pulsando Ctrl + Alt + F.

También pueden insertarse empleando el panel Insertar en la categoría Medios, pulsando sobre la opción  Flash SWF.

Veamos las opciones más importantes que nos ofrece el inspector de propiedades cuando tenemos seleccionado el archivo Flash:

Al igual que otros elementos, como las imágenes, podemos asignarle el ancho (An.) y alto (Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.

• Si disponemos del programa Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), podremos editarlo con pulsar en Editar.
• La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio.
• La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica que nada más cargarse la página comenzará a reproducirse la película Flash. Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película hasta que el usuario la activase. Por tanto interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.
• La Calidad, cuanto más baja, antes se cargará el archivo pero peor se verá. Conviene dejarla en Alta para verlo tal cuál se creó.
• La Escala permite elegir cuanto se verá del archivo. Las películas Flash no siempre son del tamaño exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se verá todo la película. En cambio, si elegimos Ajuste exacto, se verán sólo los objetos, omitiendo el escenario de fondo.
• Alinear funciona como con las imágenes, y nos permite alinear la película en relación con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un párrafo) empleando CSS.
• Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio, si es Transparente, el fondo se verá transparente (a no ser que se haya especificado un color de fondo en el Flash).
• El botón Reproducir nos permite ver la película.

Al insertarse la película, veremos la ubicación en la vista de diseño con el siguiente aspecto:

Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunos archivos que nos permitirán reproducir los elementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se verán. De todas formas, Dreamweaver nos avisará cuando incluya archivos.

Sonido

No es muy habitual incluir sonido en una página web, ya que algunos usuarios suelen estar escuchando su propia música cuando navegan en Internet, por lo que el escuchar también sonido en cada página que se visita puede resultar algo molesto.

A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva. Las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan desactivarlo. Siempre es mejor tener esa opción a que el usuario abandone la página.

Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3 y el WAV, aunque existen otros formatos diferentes que también pueden utilizarse (MIDI). Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

Se puede insertar un archivo de audio en un documento de dos formas, con la nueva etiqueta <audio > o mediante un plug-in.

1. Nueva etiqueta <audio>

Hasta hace poco la única forma de insertar audio en una página web era mediante el uso de un plug-in pero desde que apareció HTML5 los navegadores compatibles son capaces de interpretar la etiqueta <audio> que reproduce sonido de una forma estándar sin necesidad de ningún plug-in.

La etiqueta <audio> sólo funcionará en los navegadores compatibles con HTML 5, IE a partir de la versión 9 y las versiones de  Firefox 3.5, Chrome 3.0 y Safari 3.0, además de algunos otros. Afortunadamente, ya son la mayoría.

Puedes insertar un audio con el menú Insertar → Medios opción HTML5 Audio. En el panel Insertar, categoría Medios, encontrarás la misma opción.

 

En la unidad 12 explicaremos con más detalle cómo escribir código HTML desde la vista Código, pero por lo pronto debemos adelantar que a veces es necesario editar la etiqueta <audio> para asegurarnos que todos los navegadores pueden reproducir los archivos de audio que insertamos en nuestras páginas.

La forma de la etiqueta es la siguiente:

<audio>      <source src="archivo sonido" type="MIME-type"/>      </audio>

Si el navegador que usan nuestros visitantes está actualizado, lo más probable es que no tengan problemas para escuchar el audio. Sin embargo, como algunos usuarios pueden utilizar versiones anteriores de diversos navegadores, debemos modificar la etiqueta <audio> para asegurarnos que la reproducción de sonido se va a efectuar sin problemas.

En marzo de 2013, la capacidad de reproducción de audio de diversos formatos (y sus respectivos mime-types) entre los distintos navegadores era la siguiente:

 

Navegador	MP3	WAV	OGG
Internet Explorer 9+	si	no	no
Chrome 6+	si	si	si
Firefox 3.6+	no	si	si
Safari 5+	si	si	no
Tipo MIME	audio/mpeg	audio/wav	audio/ogg

Por ejemplo, el siguiente código se reproducirá en todos los navegadores excepto para quienes usen Firefox en la versión citada:

<audio controls>
  <source src="media/audio.mp3" type="audio/mpeg"/>
  Este navegador no puede reproducir este archivo de sonido. Actualice el navegador
</audio>
        

Si tu navegador no es Firefox 3.6 deberías ver el reproductor de sonido a continuación.

Se suele añadir el atributo controls para que se muestren los controles del reproductor que permiten parar/reanudar y modificar el volumen.

También es bueno añadir un texto para que avise al usuario que su navegador no reconoce la etiqueta.

La solución para evitar las incompatibilidades entre algunas versiones de los distintos navegadores y los diversos formatos de sonido es repetir la instrucción source varias veces para incluir varios tipos de archivos de sonido, de esta forma el sonido se reproducirá en más navegadores.

Por ejemplo

 <audio controls>
   <source src="media/audio.mp3" type="audio/mpeg"/>
   <source src="media/audio.ogg" type="audio/ogg"/>
 <source src="media/audio.wav" type="audio/wav"/>
   Este navegador no puede reproducir este archivo de sonido. Actualice el navegador.
</audio>

De esta forma, si un navegador no puede reproducir el primer archivo de sonido, lo intentará con el segundo o incluso con el tercero.

Plug-in.

Esta segunda forma de reproducir sonido se utiliza cada vez menos. Para insertar un archivo de audio mediante plug-in tienes que dirigirte al menú Insertar, Medíos, opción Plug-in. También es posible usar el panel Insertar, categoría Medios.

 

Aquí puedes ver un ejemplo de un archivo de sonido inserto a través de un plug-in.

 

Pueden ocurrir dos cosas:

Si tu navegador tiene instalado el plugin necesario para reproducir el archivo, se mostrará un control similar a este (imagen de IE8):

En cambio, si el plugin necesario no está instalado, el navegador ofrecerá la posibilidad de hacerlo, como en esta imagen de Firefox.

Un plugin es un añadido al navegador, que nos permite realizar funciones extra, como en este caso, reproducir un archivo de música. Al insertar un elemento como plug-in lo que indicamos es que el navegador debe de intentar abrir el archivo empleando los pluigns que tenga para tal fin. Por eso, si no lo tiene, nos invitará a instalarlo.

 

En Dreamweaver no se mostrarán los controles de audio. Todos los archivos que son insertados como plugin aparecen representados dentro de Dreamweaver por una imagen como la de la izquierda.

En el Inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarán los controles de audio, mediante Al y An.

En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la página, pero que no se muestren los controles de audio, los campos Al y An deben valer cero.

Los sonidos se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores pueden definirse como propiedades a través del inspector de propiedades.

Por ejemplo, para que el archivo se reproduzca contínuamente le hemos añadido loop="true".

Si no queremos que se reproduzca automáticamente, podemos añadir también autostart="false"

La línea de código del archivo de audio nos quedaría del siguiente modo:

<embed src="media/audio.mid"  autostart="false" loop="true"></embed>
     

Si quieres poner música de fondo en una página web, sin que aparezcan los controles de audio, puedes escribir este código directamente en la vista Código.

<bgsound src="cancion1.wav" loop="-1">      

Insértalo después de la etiqueta </title> Con el parámetro loop puedes decidir cuántas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).

No obstante, insistimos en que no es recomendable poner música sin controles de reproducción.

 

Lo más habitual en la web es insertar el sonido empleando Flash. Esto hace que no se necesiten plugins, sólo poder reproducir Flash. Además, nos permite crear los controles personalizados.

Otras páginas de Internet, como goear nos permiten insertar en nuestra web un reproductor con música del sitio, que nuestros visitantes podrán escuchar.

Vídeos

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

En este apartado nos referimos a insertar vídeo de un archivo alojado en nuestro sitio. No a mostrar vídeos de sitios especializados, como youTube.

Para insertar un archivo de vídeo en un documento puedes hacerlo de dos formas, con la nueva etiqueta <video > o mediante un plug-in.

1. Vídeo con HTML 5.

Para insertar un archivo de video en la página, podemos usar el menú Insertar → Medios opción HTML5 Video. También es posible utilizar el panel Insertar, categoría Medios.

El formato básico de la etiqueta <video> es el siguiente.

<video> 
   <source src="archivo vídeo" type="MIME-type"/> 
</video>

La instrución típica para reproducir vídeo sería, por ejemplo:

<video  width="160" height="120" controls>
  <source src="media/cotorra.mp4" type="video/mp4"/>
  <source src="media/cotorra.ogv" type="video/ogv"/>
  Este navegador no puede reproducir este archivo de vídeo. Actualice el navegador.
</video>

 Es muy similar a la que hemos visto para sonido, salvo que aparecen los atributos de tamaño del vídeo (witdth, height), los cuales también pueden modificarse en el Inspector de propiedades cuando el elemento está seleccionado.

Tampoco todos los navegadores son capaces de reproducir todos los tipos de vídeo, por lo cual es conveniente colocar el vídeo en más de un formato. La compatibilidad de los tipos de vídeo con los navegadores más usados se muestra en la siguiente tabla (en marzo 2013).

Navegador	MP4	WebM	OGG
Internet Explorer 9+	si	no	no
Chrome 6+	si	si	si
Firefox 3.6+	no	si	si
Safari 5+	si	no	no
Tipo MIME	video/mp4	video/webm	video ogv

A continuación se ejecutará el código del ejemplo que estamos viendo, verás un reproductor de vídeo si estás utilizando un navegador compatible:

La etiqueta <vídeo> tiene varios atributos opcionales, entre los que podemos citar los siguientes:

- autoplay. Hace que el vídeo comience a reproducirse al cargarse la página. 

- loop. Para que se reproduzca una vez tras otra, sin parar.

- preload. Para que se cargue al hacerlo la página, especificaremos preload="auto", para que se cargue al pulsar play, preload="none".

También es posible utilizar otros reproductores y controlar la reproducción del vídeo mediante Javascript.

Hemos visto varios tipos de archivos de vídeos fijándonos en su extensión (.mp4, .ogv, ...) pero hay algo más que lo complica un poco. Dentro de cada uno de estos tipos de archivos el vídeo puede estar codificado de distinta forma, es lo que se conoce como Codecs. Es decir, podemos tener un archivo de vídeo ejemplo.mp4 codificado con el codec H.264 y otro archivo con el mismo nombre ejemplo.mp4 pero codificado con el codec mpeg-2. Algo similar ocurre con los archivos de audio.

Debido a esto, en ocasiones, nuestro navegador puede ser capaz de reproducir un tipo de archivo y otras ocasiones no poder hacerlo. En internet hay páginas para descargarse codecs e instalarlos en el navegador. También hay páginas que transforman un formato en otro, por ejemplo http://www.online-convert.com/, es interesante convertir los vídeos mp4 en ogv y colocarlos en los dos formatos para que se vean desde Firefox y desde la mayoría de los navegadores.

 Vídeo mediante Plug-in.

Para insertar mediante plug-in un archivo de vídeo en un documento tienes que dirigirte al menú Insertar, Medíos, opción Plug-in.

Puedes ver el vídeo (si tienes el plugin adecuado) a continuación:

El inspector de propiedades para los archivos de vídeo insertados de esta forma es el mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in.

Hay que prestar especial atención al ancho y alto. Por defecto, si Dreamweaver no puede obtener el tamaño del archivo lo fijará a 32 x 32, insuficiente para ver un vídeo. Es mejor borrarlos, y así el vídeo se mostrará con su tamaño original. Si conocemos el tamaño del vídeo, podemos pensar en insertarlo directamente, pero hay que tener en cuenta el tamaño de los controles de reproducción, que depende de cada navegador.

Los vídeos también se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores pueden cambiarse a través botón Parámetros, del mismo modo que en el caso de los archivos de audio, añadiendo autostart="false" y loop="true".

 

Como ya hemos dicho, todos los objetos insertados a través de la opción Plug-in precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo vinculado (el archivo de audio o de vídeo) que ha de reproducirse.

En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede establecerse en el campo URL plg una página en la que pueda encontrarlo. No será necesario en los archivos más comunes de audio y vídeo, pero sí si intentamos cargar un archivo más raro.