Debe introducir al menos 3 caracteres en el buscador.
Inicio / Wikis / Cursos gratis / Curso completo de HTML - Multimedia Inline (I)

Curso completo de HTML - Multimedia Inline (I)

 ***** (126 opiniones)
GNU Free Documentation License Curso gratis de Jorge Ferrer, Víctor García y Rodrigo García - 23 de Febrero de 2006
Temas Relacionados: HTML
59. Multimedia Inline (I)

Hasta hace muy poco el único sistema disponible en el WWW para incluir contenido multimedia era usar archivos externos como acabamos de ver. Sin embargo gracias a las iniciativas de Microsoft y Netscape están apareciendo nuevas etiquetas y atributos del lenguaje HTML junto con nuevas técnicas que permiten al diseñador de páginas Web incluir dicho contenido en una página.

Vídeo inline

Uno de los primeros mecanismos fue introducido en Microsoft Internet Explorer. Este navegador incluye extensiones a la etiqueta IMG que permiten insertar vídeo con formato AVI. Estas extensiones han sido adoptadas también por el navegador Opera, pero por ningún otro, y tampoco por el estándar HTML 4.0 pero al ser ignorado por los navegadores que no lo soportan no impide la legibilidad de la página para los usuarios de estos.

La extensión en la que se basa la inclusión de vídeo inline es el atributo DYNSRC. Este atributo se usa de manera muy similar al ya conocido SRC, pero ahora el valor deberá ser la dirección de un vídeo en formato AVI en lugar de una imagen. Una de las grandes ventajas de este sistema para insertar vídeo consiste en la posibilidad (de hecho es obligatorio) de usar simultáneamente los dos atributos mencionados, SRC y DYNSRC, de manera que si el navegador soporta la inclusión de vídeo en la página mostrará el vídeo y en caso contrario mostrará la imagen. Veamos un ejemplo:

 <IMG DYNSRC="baile.avi"
    SRC="baile.gif"
    ALT="[Un baile]">
 
       

También es posible usar el resto de atributos de la etiqueta IMG como ALIGN, VSPACE, HSPACE, WIDTH, HEIGHT, etc. Pero además de estos, Microsoft introdujo otros nuevos como acompañamiento del atributo DYNSRC y que nos permitirán tener un mayor control sobre el vídeo, estos son:

  • CONTROLS: Este es un atributo que no toma ningún valor. Si es incluido, muestra el vídeo AVI junto con una serie de controles para que el usuario pueda parar y reproducir el vídeo a su antojo.

  • LOOP: Toma como valor un número que determina el número de veces que el vídeo será mostrado. Por ejemplo con LOOP="5" el vídeo volverá a reproducirse desde el principio 5 veces y luego parará. Con un valor LOOP= "-1" el vídeo será repetido infinitas veces.

  • START: Determina cuando debe empezar a reproducirse el vídeo. Puede tomar dos valores: con START="FILEOPEN" (valor por defecto) el vídeo se reproducirá tan pronto como la página y el fichero de vídeo lleguen al ordenador; con START="MOUSEOVER" el vídeo no empezará a reproducirse hasta que el usuario sitúe el cursor sobre él.

  • LOOPDELAY: [Solo Internet Explorer 4.0] Con este atributo podemos especificar el retardo en milisegundos que el navegador esperará tras acabar antes de empezar a reproducir el vídeo de nuevo.

El atributo LOWSRC

Este atributo es una extensión de Netscape a la etiqueta IMG. Su función es ofrecer la posibilidad al programador de especificar una segunda imagen, junto con la indicada con SRC, que sirva de previsualización de la imagen final. Esta previsualización suele ser la misma imagen pero con peor calidad, por ejemplo en formato JPEG con alto grado de compresión, y de mucho menor tamaño. De esta forma cargará mucho antes y el navegante podrá hacerse una idea de cómo será la imagen completa antes de que esta llegue:

 <IMG SRC="alta_calidad.gif"
    LOWSRC="baja_calidad.gif">
 
       

Los navegadores que no entiendan esta etiqueta simplemente la ignorarán, y no mostrarán nada hasta que la imagen de alta calidad llegue, exactamente igual que si no hubiéramos usado LOWSRC. Por tanto podemos concluir que este atributo no causa ningún prejuicio para los usuarios de dichos navegadores. LOWSRC no ha sido aceptado por el estándar HTML 4.0.

Animaciones usando LOWSRC

Pronto los diseñadores de páginas Web se dieron cuenta que podían usar el atributo LOWSRC para algo más que para mostrar una previsualización de la imagen. Existen varios Webs que destacan por su excepcional diseño que se sirven de este atributo para crear una sencilla animación formada únicamente por dos imágenes. Un excelente ejemplo de este efecto puede ser visto en la página creada por Josh Feldman que encontramos en la dirección:

En esta página se usa el atributo LOWSRC para mostrar una imagen de un sobre cerrado y SRC para mostrar ese mismo sobre de fondo pero en primera instancia la carta ya abierta. En la figura 10.7 podemos ver la página tal y como aparece inicialmente con el sobre cerrado (imagen LOWSRC) y la carta final abierta que es mostrada pocos segundos después.

Figura 10.7. Usando el atributo LOWSRC se pueden crear animaciones sencillas pero impactantes como es el caso del web de Spectacle.

Sonidos Inline

Microsoft Internet Explorer también ha introducido una nueva etiqueta para posibilitar la inclusión de sonido en las páginas Web. Este sonido será cargado junto con la página y empezará a ser tocado sin requerir ninguna acción por parte del usuario. Para incluir un sonido de fondo como éste debemos usar la etiqueta BGSOUND. Veamos un ejemplo:

 <BGSOUND SRC="sinfonia_5.au">
 
       

Esta etiqueta no producirá ningún efecto visual en la página, simplemente si empezará a reproducirse el sonido de fondo. Los usuarios de otros navegadores no serán perjudicados por la inclusión de este atributo, simplemente no podrán oír el sonido.

El resto de atributos son:

  • LOOP: Al igual que con el vídeo este atributo permite controlar el número de veces que el fichero de sonido será reproducido. Si usamos LOOP="-1" se reproducirá repetidamente hasta que el navegante abandone la página.

  • BALANCE: (Sólo Internet Explorer 4.0 o posterior) Este atributo permitirá al programador Web cambiar el balance de sonidos estéreo. Puede tomar un valor entre -10000 y 10000. El efecto de cada uno de los dos extremos dependerá de la configuración del navegante, pero en cualquier caso ambos significarán que el sonido se oirá únicamente por uno de los dos altavoces. Con los valores intermedios controlamos el balance en uno u otro.

  • TITLE: (Sólo Internet Explorer 4.0 o posterior). Con este atributo damos un título al sonido. Este título es solo informativo y no se mostrará ningún indicativo visual.

  • VOLUME: (Sólo Internet Explorer 4.0 o posterior). El volumen con el que se reproducirá el sonido puede ser controlado gracias a este atributo que puede tomar un valor entre -10000 y 0. Si usamos VOLUME="0" (máximo volumen) el sonido se reproducirá al 100% de la configuración actual del usuario. Usando un valor menor el volumen bajará, no hay ninguna forma usando HTML de aumentar el volumen por encima de la configuración elegida en su ordenador por cada persona.

Es muy importante no poner un sonido que pueda resultar molesto a los visitantes de nuestras páginas, ya que con ello conseguiremos que las abandonen rápidamente para dejar de oírlo.

Microsoft Internet Explorer soporta tres formatos de sonido inline:

  • AU: El formato de Sun que usa la codificación u-law.

  • WAV: Muestras de sonido específicas para Windows.

  • MIDI: Estos ficheros deben tener la extensión .mid.

Hay que tener mucho cuidado a la hora de incluir sonidos en nuestras páginas, ya que en general este tipo de ficheros son de gran tamaño y pueden incrementar enormemente el tiempo de carga. Por otro lado no es recomendable que sea reproducido más de una vez, ya que la repetición cansará a los visitantes.

En el directorio Sonido hemos incluido un ejemplo (sonido1.htm) que usa la etiqueta BGSOUND para reproducir como sonido de fondo un archivo en formato MIDI.

Al igual que ocurría con las extensiones para vídeo de Microsoft la etiqueta BGSOUND no es soportada por ningún otro navegador y tampoco ha sido aceptado por el estándar HTML 4.0. Sin embargo existe otro método que veremos un poco más adelante mucho más extendido basado en PLUG-INs y en una etiqueta llamada EMBED.

Tabla de contenidos
  1. 1 - Introducción al lenguaje HTML
  2. 2 - Primeros pasos con HTML
  3. 3 - Parrafos en HTML
  4. 4 - Cómo insertar imagenes en una pagina
  5. 5 - Cómo crear enlaces hipertexto
  6. 6 - PRÁCTICA 1: La pagina web de "La chistera"
  7. 7 - Anclas (I)
  8. 8 - Anclas (II)
  9. 9 - Formato de texto
  10. 10 - La etiqueta FONT
  11. 11 - Texto preformateado
  12. 12 - Acentos y otros caracteres especiales
  13. 13 - Listas en HTML (I)
  14. 14 - Listas en HTML (II)
  15. 15 - Comentarios en HTML
  16. 16 - Practica 2: Un sitio web completo
  17. 17 - Usando color en el WWW
  18. 18 - Cómo cambiar la apariencia de una pagina
  19. 19 - Imagenes en las paginas Web (I)
  20. 20 - Imagenes en las paginas Web (II)
  21. 21 - Imagenes en las paginas Web (III)
  22. 22 - Cómo cambiar la apariencia de las imagenes
  23. 23 - Alternativas a las imagenes inline (I)
  24. 24 - Alternativas a las imagenes inline (II)
  25. 25 - Mejoras en las imagenes
  26. 26 - Cómo se crea una tabla HTML (I)
  27. 27 - Cómo se crea una tabla HTML (II)
  28. 28 - Alineamiento de tablas
  29. 29 - Alineamiento de celdas y filas
  30. 30 - Ancho de tablas y celdas
  31. 31 - Celdas que abarcan varias filas o columnas
  32. 32 - Margenes y separación de celdas
  33. 33 - Anidamiento
  34. 34 - Practica 3 - Tabla de Datos
  35. 35 - Practica 4 - Pagina Web con una estructura creada con tablas
  36. 36 - Practica 4 - Pagina Web con una estructura creada con tablas
  37. 37 - Practica 4 - Pagina Web con una estructura creada con tablas
  38. 38 - Estandares y extensiones del lenguaje HTML (I)
  1. 39 - Estandares y extensiones del lenguaje HTML (II)
  2. 40 - Extensiones a las listas (I)
  3. 41 - Extensiones a las listas (II)
  4. 42 - Alineamiento
  5. 43 - La etiqueta META
  6. 44 - Otras etiquetas del lenguaje HTML 3.2
  7. 45 - El atributo TARGET
  8. 46 - La etiqueta BASE
  9. 47 - Creación de paginas con frames
  10. 48 - Creación del documento de definición de frames (I)
  11. 49 - Creación del documento de definición de frames (II)
  12. 50 - Pagina completa con frames
  13. 51 - Atributos de la etiqueta FRAME
  14. 52 - Compatibilidad: NOFRAME
  15. 53 - Anidamiento de framesets
  16. 54 - Bordes de los frames
  17. 55 - Valores especiales del atributo TARGET
  18. 56 - Practica 5: Web de Los Alpes con frames
  19. 57 - Frames flotantes
  20. 58 - Sonido vídeo y otros ficheros externos
  21. 59 - Multimedia Inline (I)
  22. 60 - Multimedia Inline (I)
  23. 61 - Plug-ins y objetos incrustados
  24. 62 - Java en las Paginas Web
  25. 63 - Inserción de Applets Java (I)
  26. 64 - Inserción de Applets Java (II)
  27. 65 - Inserción de Applets Java (III)
  28. 66 - ActiveX, la tecnología del futuro
  29. 67 - Formularios en HTML
  30. 68 - Controles de Formularios (I)
  31. 69 - Controles de Formularios (II)
  32. 70 - Controles de Formularios (III)
  33. 71 - Controles de Formularios (IV)
  34. 72 - Otros controles
  35. 73 - Practica 6-Formulario para "Los Alpes"
  36. 74 - COMO USAR LOS DATOS DE UN FORMULARIO
  37. 75 - Envío De Ficheros Usando Formularios
Autor y licencia de 'Curso completo de HTML - Multimedia Inline (I)'
Jorge Ferrer, Víctor García y Rodrigo García Extraído de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/ GNU Free Documentation License
Licencia GNU Free Documentation License: http://www.gnu.org/copyleft/fdl.html
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.

Wikis relacionados con 'Curso completo de HTML - Multimedia Inline (I)'

Con este humilde artículo espero facilitar la comprensión del Inline Assembly en Gcc. Si bien... Más »
El objetivo de este curso es aprender a programar en el lenguaje Ada, desde sus... Más »
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir,... Más »
Para realizar tu pagina Web necesitas en principio un editor de textos para escribir los... Más »
Josep Palau i Fabre, poeta barcelonés nacido en 1917, es uno de los máximos representantes... Más »
Gente Wiki
Luis Rivera Sanchez
Me desempeño como abogado y mi mejor deseo es obtener información en la rama de derecho a fin de acrecentar...
Delitos informáticos, Accidentes de tráfico,...
Jesus Saavedra Jimenez
Biologo, especializado en desarrollo rural. Director de proyectos de desarrollo en costa, sierra y amazonia peruana. Instituciones principales: universidad nacional...
Gestión de medios de comunicación, Medios online,...
German Pomares Herrera
Escribo para televisión, diarios (el dinosaurio de papel), radio y publicidad (de algo hay que comer). En ocasiones me daba...
Campañas publicitarias, Imagen corporativa,...
Francisco Valdivielso
Consultor de empresas en el área de gestión, gestión de calidad, ambiente, seguridad ocupacional y 5s.
Fredy
Periodista, poeta y escritor guatemalteco, con capacidad de composición, autoría e interpretación musical.
Investigación periodística
Arnaldo Deraco
Tengo una empresa de impresion por sublimacion y quiero enriquecerme en marketing para comercializar mis productos.
Retoque fotográfico
Suscribirse
¿Estás seguro de que deseas eliminar este capítulo?