Multimedia

¿Qué es multimedia?

El término multimedia se utiliza para referirse a cualquier objeto o sistema que utiliza múltiples medios de expresión (físicos o digitales) para presentar o comunicar información. Los medios pueden ser variados: texto, imágenes, animación, sonido, video, etc.

multimedia
Fig.1 - Elementos multimedia
Los primeros navegadores web solo soportaban texto. Más tarde llegó el soporte para colores, fuentes e imágenes. El audio, video y animaciones se manejaban de forma diferente según el navegador. Algunos formatos requerían plug‑ins adicionales. HTML5 promete un futuro más fácil para estos elementos.
flecha

HTML video

Antes de HTML5, un vídeo solo podía reproducirse mediante plug‑ins como Flash. HTML5 introduce la etiqueta <video> para incrustar videos de forma estándar. Los formatos compatibles son: MP4, WebM y Ogg.

Etiqueta y atributos Descripción
<video> Define el video
<source> Especifica recursos multimedia alternativos
<track> Define subtítulos
autoplay Reproduce automáticamente
controls Muestra controles de reproducción
height Altura del video
loop Reproduce en bucle
muted Silencia el video
poster Imagen previa
preload Controla la precarga
src Ruta del video
width Ancho del video

Ejemplo de uso

Big Buck Bunny

Código

  <video width="100%" height="auto" controls autoplay preload="auto" loop poster="./img/conejo_multimedia.jpg">
    <source src="video/mov_bbb.mp4" type="video/mp4">
    <source src="video/mov_bbb.ogg" type="video/ogg">
  </video>
flecha

HTML audio.

La etiqueta <audio> define sonido, como música u otros flujos de audio. Los formatos admitidos son MP3, WAV y OGG. Es una etiqueta nueva de HTML5.

Etiqueta y atributos Descripción
<audio> Define el audio
<source> Especifica recursos multimedia alternativos
autoplay Reproduce automáticamente
controls Muestra controles de reproducción
loop Reproduce en bucle
muted Silencia el audio
preload Controla la precarga
src Ruta del audio

Ejemplo de uso

Audio

Código

  <audio controls>
    <source src="audio/intro.mp3" type="audio/mp3">
    <source src="audio/intro.ogg" type="audio/ogg">
    <source src="audio/intro.wav" type="audio/wav">
  </audio>
flecha

Elemento Object

Define un objeto incrustado dentro de un documento HTML. Se utiliza para insertar plug‑ins como applets de Java, lectores PDF o Flash. Es soportado por todos los navegadores.

Ejemplo de uso

Object Flash

Código

<object width="400" height="50" data="./swf/bookmark.swf"></object>
flecha

Elemento iFrame

La etiqueta <iframe> especifica un marco en línea. Un marco en línea se utiliza para insertar otro documento dentro del documento HTML actual.
Para hacer frente a los navegadores que no soportan <iframe>, se añade un texto entre la etiqueta de apertura y el cierre.

Ejemplo de uso

Video Youtube

Código

<iframe width="560" height="315" src="https://www.youtube.com/embed/MEVEUTnFzu8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Lista de reproducción Youtube

Código

<iframe width="560" height="315" src="https://www.youtube.com/embed/p84O3JAp_IM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
MARCA AS DIARIO GOL SPORT
flecha