Insertar audio y video en html
- 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.