1. Insertar Audio y Video en HTML
Antes de Dar lectura al texto realiza lo siguiente:
1Realiza un carpeta de trabajo y colócale el nombre del
tema.
2Descarga sonidos de animales y de la naturaleza y
guárdalos en la carpeta
3Descargas imágenes de los sonidos de animales y de la
naturaleza, busca las imágenes en formato .png y
guárdalos en tu carpeta.
4Lee el siguiente texto y realiza los ejercicios que se te
proponen sustituye los nombres de archivos por los que
tienes guardados en tu carpeta de trabajo.
2. En las primeras versiones de HTML las posibilidades multimedia se reducían a insertar imágenes
dentro de un texto. En esta sección se verá como insertar otros tipos de ficheros multimedia
(audio, vídeo) en un documento HTML. Para poder disfrutar de contenido multimedia en un
navegador es necesario instalar un plug-in o una aplicación externa que se encarge de visualizar
este tipo de ficheros.
Hay que tener en cuenta que el soporte para cada tipo de fichero depende de la configuración de
cada equipo y de cada navegador. Hay extensiones multimedia que sólo soporta un tipo de
navegador (ej las etiquetas<bgsound> y <dinsrc> que utiliza Internet Explorer para ejecución
de audio y video respectivamente). Hay otras etiquetas que soportan la mayoría de los
navegadores como por ejemplo (<embed>, <img>, <applet>, etc). HTML 4.0 pretende sustituir
este conjunto tan dispar de etiquetas por una sóla etiqueta <object> que sustituya a todas las
anteriores y englobe toda su funcionalidad.
Como ya hemos mencionado la etiqueta <embed> es una de las más ampliamente soportadas
por todos los navegadores y permite incluir varios tipos de ficheros multimedia como un
hiperenlace de manera que cuando el usuario siga el hiperenlace el navegador llame a una
aplicación externa que trate este tipo de ficheros.La etiqueta <embed> tiene tres atributos
principales (width, height y src) que especifican el ancho, alto y la ubicación del fichero
multimedia repectivamente pero permite otros atributos que se podrán o no utilizar dependiendo
del plug-in que tengamos instalado.
Entre estos atributos adicionales podemos destacar:
El atributo control para indicar si deben mostrarse o no los botones de control (start, stop,
etc.)
El atributo loop para indicar cuantas veces debe ejecutarse el fichero multimedia
(LOOP="n" mostrará el vídeo n veces ; (LOOP="infinite" mostrará el video una vez tras
otra, indefinidamente)
3. El atributo console para indicar si se muestra o no la consola con todos los controles y a
que tamaño)
El atributo align (para indicar en que posición aparecerá el video o la consola que controla
el audio o el fichero multimedia al que nos estamos refiriendo)
2. Incluir un Audio en una página HTML
Ejercicio
Tarea
Practicar el uso de la etiqueta <embed> y sus principales atributos (width, height y src) para
incluir un audio en una página HTML.
Procedimiento
1. Copia en un directorio local el fichero de audio que quieras utilizar. Si no tienes ninguno en tu
ordenador puedes descargar este fichero de audio (Minuet.mid) pulsando sobre el con el
botón derecho del ratón y seleccionando la opción "Guardar como".
2. Crea en el mismo directorio un fichero llamado Audio.html. Para hacerlo pulsa sobre el
explorador de windows con el botón derecho del ratón y selecciona la opción "nuevo |
Documento de texto"
3. Abre el fichero con el wordpad y escribe el siguiente código
4. <HTML>
<BODY>
<h3>Audio</h3>
<p>Ese es un ejemplo de fichero de sonido</p>
<embed src="Minuet.mid">
</body>
</html>
4. Guarda los cambios seleccionando la opción de menú "nuevo | Documento de
texto"y abre el fichero con el navegador. Si tu ordenador tiene tarjeta de sonido podrás
escuchar una música de fondo una vez cargada la página.
Solución:
Debería verse:
5. Observaciones:
Añade el atributo loop="infinite" y observa como el audio se ejecuta una vez tras otra
indefinidamente.
Añade los atributos width y height y asígnales diferentes valores. De este modo podrás
comprobar como cambian las dimensiones del panel de audio. Elimina el atributo width y
especifica únicamente el atributo height. Observa que al igual que ocurre con las imágenes
cuando sólo se especifica uno de los dos atributos el otro se ajusta automáticamente,
mientras que si se especifican los dos aparece un mensaje de error o sale el panel de control
deformado si las dimensiones especificadas no son proporcionales a las que originalmente
tenía el panel.
6. 3. Incluir un Video en una página HTML
Ejercicio
Practicar el uso de la etiqueta <embed> y sus principales atributos (width, height y src) para
incluir un video en una página HTML.
Procedimiento
1. Copia en un directorio local el fichero de video que quieras utilizar. Si no tienes ninguno en tu
ordenador puedes descargar este fichero de video (Christ.avi) pulsando sobre el con el botón
derecho del ratón y seleccionando la opción "Guardar como".
2. Crea en el mismo directorio un fichero llamado Video.html. Para hacerlo pulsa sobre el
explorador de windows con el botón derecho del ratón y selecciona la opción "nuevo |
Documento de texto"
3. Abre el fichero con el wordpad y escribe el siguiente código
<HTML>
<BODY>
<h3>Video</h3>
<p>Ese es un ejemplo de fichero de video</p>
<embed src="Christ.avi">
</body>
</html>
4. Guarda los cambios seleccionando la opción de menú "nuevo | Documento de
texto"y abre el fichero con el navegador (la carga tardará unos minutos). Una vez cargado
por completo podrás ver un vídeo con el interior de una capilla. Si tienes el plug-in adecuado
7. y tarjeta de sonido también podrás escuchar una música de fondo.
Solución:
Debería verse:
8. Observaciones:
Añade el atributo loop="2" y observa como el video se ejecuta dos veces seguidas.
Añade los atributos width y height y asígnales diferentes valores. De este modo podrás
comprobar como cambian las dimensiones del panel de audio. Elimina el atributo width y
especifica únicamente el atributo height. Observa que al igual que ocurre con las imágenes
cuando sólo se especifica uno de los dos atributos el otro se ajusta automáticamente,
mientras que si se especifican los dos aparece un mensaje de error o sale el panel de control
deformado si las dimensiones especificadas no son proporcionales a las que originalmente
tenía el panel.
Ahora que ya realizaste estos ejercicios realiza un página web donde utilices las imágenes con su respectivo
sonido. Se creativo y puedes agregar información adicional al sitio.