Multimedia

Multimedia viene en muchos formatos diferentes. Puede ser casi cualquier cosa que pueda escuchar o ver, como imágenes, música, sonido, videos, discos, películas, animaciones y más. Las páginas web a menudo contienen elementos multimedia de diferentes tipos y formatos.

Una de las novedades que trae HTML5 es juntamente la posibilidad de manejar Audio y Video en linea desde el propio navegador. Hasta ahora, no ha habido un estándar para esto por lo que había que usar trucos muy ligados a una tecnología (Ej Flash) y navegador, causando serios problemas al resto.

1. Picture

Esta etiqueta brinda a los desarrolladores web más flexibilidad para especificar recursos de imagen. El uso más común de esta etiqueta será para dirección de arte en diseños receptivos. En lugar de tener una imagen que se escala hacia arriba o hacia abajo según el ancho de la ventana gráfica, se pueden diseñar varias imágenes para llenar mejor la ventana gráfica del navegador.

la etiqueta <picture> contiene dos etiquetas: <img> y <source>.

El navegador buscará el primer elemento <source> donde la consulta de medios coincida con el ancho de la ventana gráfica actual, y luego mostrará la imagen adecuada (especificada en el atributo srcset). El elemento <img> se requiere como una opción alternativa si ninguna de las etiquetas de origen coincide.

La etiqueta <picture> funciona "similar" a las etiquetas <audio> y <video>. Configura diferentes fuentes y la primera fuente que se ajusta a las preferencias es la que se sera usanda.

<PICTURE>
   <SOURCE MEDIA='(min-width:650px)' SRCSET=img_rosa.jpg>
   <SOURCE MEDIA='(min-width:465px)' SRCSET=img_blanca.jpg>
   <IMG SRC=imagen.jpg alt=Flores title=Flores>
</PICTURE>   

Para saber mas sobre la etiqueta <IMG>.

2. Audio

Etiqueta usada para incrustar contenido de sonido en un documento, como música u otras transmisiones de audio. Esta etiqueta puede contener una o más etiquetas <source> con diferentes fuentes de audio. El navegador elegirá la primera fuente que admita.

Formatos de audio
FormatoExtensiónDescripción
MIDI.midMusical Instrument Digital Interface. Formato principal para todos los dispositivos de música electrónica como sintetizadores y tarjetas de sonido para PC. Los archivos MIDI no contienen sonido, sino notas digitales que pueden reproducirse mediante electrónica. Se reproduce bien en todas las computadoras y hardware de música, pero no en los navegadores web.
RA.ramRealAudio. Desarrollado por Real Media para permitir la transmisión de audio con bajos anchos de banda. No se reproduce en navegadores web.
WMA.wmaWindows Media Audio. Formato principal para todos los dispositivos de música electrónica como sintetizadores y tarjetas de sonido para PC. Los archivos MIDI no contienen sonido, sino notas digitales que pueden reproducirse mediante electrónica. Se reproduce bien en todas las computadoras y hardware de música, pero no en los navegadores web.
AAC.aacAdvanced Audio Coding. Desarrollado por Apple como el formato predeterminado para iTunes. Se reproduce bien en computadoras Apple, pero no en navegadores web.
WAV.wavDesarrollado por IBM y Microsoft. Se reproduce bien en los sistemas operativos Windows, Macintosh y Linux. Soportado por HTML.
Ogg.oggTheora Ogg. Desarrollado por la Fundación Xiph.Org. Soportado por HTML.
MP3.mp3MP3 es el formato más popular para reproductores de música. Combina buena compresión (archivos pequeños) con alta calidad. Compatible con todos los navegadores.
MP4.mp4MP4 es un formato de video, pero también se puede usar para audio. Compatible con todos los navegadores.

El texto entre el <audio> y </audio> sólo se mostrará en los navegadores que no soportan el elemento <audio>.

Atributos Audio
AtributosDescripción
autoplayAudio se reproducira tan pronto como este listo.
controlsMostrar los controles de audio.
loopEmpieza nuevamente cuanto acaba la reproduccion
mutedIndica que debe estar en MUTE (silencio)
preloadEspecifica cómo debe ser cargado el audio/video cuando se carga la página. auto | metadata | none.

Hay tres formatos de audio compatibles en HTML: MP3, WAV y OGG.

<AUDIO [autoplay] [controls] [loop] [muted] [preload]>
  <SOURCE SRC=audio.mp3 TYPE='audio|mpeg' />
  <SOURCE SRC=audio.wav TYPE='audio|wav' />
  <SOURCE SRC=audio.ogg type='audio|ogg' />
  Tu navegador no soporta AUDIO.
</AUDIO>

3. Video

Se usa para incrustar contenido de video en un documento, como un clip de película u otras transmisiones de video. Esta etiqueta contiene una o más etiquetas <source> con diferentes fuentes de video. El navegador elegirá la primera fuente que admita.

El texto entre las etiquetas <video> y </video> sólo se mostrará en los navegadores que no soportan el elemento <video>.

Formatos de video
FormatoExtensiónDescripción
MPEG.mpgDesarrollado por el grupo de expertos en imágenes en movimiento. El primer formato de video popular en la web. Ya no se admite en HTML.
MP4Desarrollado por el grupo de expertos en imágenes en movimiento. De uso general en cámaras de video y hardware de TV. Compatible con todos los navegadores y recomendado por YouTube.
AVI.aviAudio Video Interleave. Desarrollado por Microsoft. De uso general en cámaras de video y hardware de TV. Se reproduce bien en computadoras con Windows, pero no en navegadores web.
WMV.wmvWindows Media Video. Desarrollado por Microsoft. De uso general en cámaras de video y hardware de TV. Se reproduce bien en computadoras con Windows, pero no en navegadores web.
QT.movQuickTime. Desarrollado por Apple. De uso general en cámaras de video y hardware de TV. Se reproduce bien en computadoras Apple, pero no en navegadores web.
RV.ramRealVideo. Desarrollado por Real Media para permitir la transmisión de video con bajos anchos de banda. No se reproduce en navegadores web.
FlashFlash. Desarrollado por Macromedia. A menudo requiere un componente adicional (complemento) para funcionar en los navegadores web.
OggTheora Ogg. Desarrollado por la Fundación Xiph.Org. Soportado por HTML.
WebMDesarrollado por Mozilla, Opera, Adobe y Google. Soportado por HTML.

Hay tres formatos de video compatibles en HTML: MP4, WebM y OGG.

Atributos Video
AtributosDescripción
AUTOPLAYEspecifica que el vídeo se reproducirá tan pronto como esté listo.
CONTROLSEspecifica que los controles de vídeo debe mostrar (por ejemplo, un botón de reproducción, pausa, volumen, etc).
LOOPEspecifica que el audio/vídeo se iniciará de nuevo, cada vez que se terminó.
MUTEDEspecifica que la salida de audio del vídeo debe ser silenciado. Solo para video.
POSTERDefine la URL de una imagen que se muestra mientras el vídeo se descarga o hasta que el usuario pulsa el botón de reproducción. Solo para video
PRELOADEspecifica cómo debe ser cargado el audio/video cuando se carga la página. auto | metadata | none.
WIDTHAncho
HEIGHTAlto
<VIDEO width=320 height=240 [controls] [autoplay] [loop] [muted]>
  <SOURCE SRC=video.mp4 TYPE='video|mp4' />
  <SOURCE SRC=video.mp4 TYPE='video|mp4' />
  <SOURCE SRC=video.ogg TYPE='video|ogg' />
  Tu navegador no soporta VIDEO.
</VIDEO>

4. SOURCE

Se usa para especificar múltiples recursos multimedia para elementos multimedia, como: <picture>, <audio> y <video>. Esta etiqueta le permite especificar archivos alternativos de imagen/audio/video entre los que puede elegir el navegador, según el soporte del navegador o el ancho de la ventana gráfica. El navegador elegirá el primero <source> que admita.

Atributos para Source
SRCURL de la fuente del audio/video.
mediaAcepta cualquier consulta de medios válida que normalmente se definiría en un CSS.
sizesEspecifica tamaños de imagen para diferentes diseños de página.
srcsetEspecifica la URL de la imagen para usar en diferentes situaciones. Solo requerido para picture.
typeEspecifica el tipo de fuente.

5. TRACK

especifica pistas de texto para elementos <audio> o <video>. Este elemento se usa para especificar subtítulos, archivos de subtítulos u otros archivos que contienen texto, que deberían estar visibles cuando se reproducen los medios. Las pistas están formateadas en formato WebVTT (archivos .vtt).

Atributos para Track
default
kind
label
src
srclang
<VIDEO width=320 height=240 controls>
  <SOURCE src=video.mp4 type='video/mp4'>
  <SOURCE src=video.ogg type='video/ogg'>
  <TRACK src=subtitulos_es.vtt kind=subtitles srclang=es label=Español>
  <TRACK src=subtitulos_qu.vtt kind=subtitles srclang=qu label=Quechua>
</VIDEO>