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.
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>.
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.
| Atributos | Descripción |
|---|---|
| autoplay | Audio se reproducira tan pronto como este listo. |
| controls | Mostrar los controles de audio. play/stop y volumen. |
| loop | Empieza nuevamente cuanto acaba la reproduccion. |
| muted | Indica que debe estar en MUTE (silencio) |
| preload | Especifica cómo debe ser cargado el audio/video cuando se carga la página. auto | metadata | none. |
<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>
| Formato | Extensión | Descripción |
|---|---|---|
| MIDI | .mid | Musical 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 | .ram | RealAudio. Desarrollado por Real Media para permitir la transmisión de audio con bajos anchos de banda. No se reproduce en navegadores web. |
| WMA | .wma | Windows 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 | .aac | Advanced Audio Coding. Desarrollado por Apple como el formato predeterminado para iTunes. Se reproduce bien en computadoras Apple, pero no en navegadores web. |
| WAV | .wav | Desarrollado por IBM y Microsoft. Se reproduce bien en los sistemas operativos Windows, Macintosh y Linux. Soportado por HTML. |
| Ogg | .ogg | Theora Ogg. Desarrollado por la Fundación Xiph.Org. Soportado por HTML. |
| MP3 | .mp3 | MP3 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 | .mp4 | MP4 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>.
<audio controls> <source src=start.wav type=audio/wav> </audio>
Hay tres formatos de audio compatibles en HTML: MP3, WAV y OGG.
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. Soporta: MP4, WebM y OGG.
| Atributos | Descripción |
|---|---|
| AUTOPLAY | Especifica que el vídeo se reproducirá tan pronto como esté listo. |
| CONTROLS | Especifica que los controles de vídeo debe mostrar (por ejemplo, un botón de reproducción, pausa, volumen, etc). |
| LOOP | Especifica que el audio/vídeo se iniciará de nuevo, cada vez que se terminó. |
| MUTED | Especifica que la salida de audio del vídeo debe ser silenciado. Solo para video. |
| POSTER | Define 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 |
| PRELOAD | Especifica cómo debe ser cargado el audio/video cuando se carga la página. auto | metadata | none. |
| WIDTH | Ancho |
| HEIGHT | Alto |
<VIDEO width=320 height=240 [controls] [autoplay] [loop] [muted]> <SOURCE SRC=video.mp4 TYPE='video/mp4' /> <SOURCE SRC=video.avi TYPE='video/WebM' /> <SOURCE SRC=video.ogg TYPE='video/ogg' /> Tu navegador no soporta VIDEO. </VIDEO>
El texto entre las etiquetas <video> y </video> sólo se mostrará en los navegadores que no soportan el elemento <video>.
| Formato | Extensión | Descripción |
|---|---|---|
| MPEG | .mpg | Desarrollado 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. |
| MP4 | Desarrollado 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 | .avi | Audio 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 | .wmv | Windows 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 | .mov | QuickTime. 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 | .ram | RealVideo. Desarrollado por Real Media para permitir la transmisión de video con bajos anchos de banda. No se reproduce en navegadores web. |
| Flash | Flash. Desarrollado por Macromedia. A menudo requiere un componente adicional (complemento) para funcionar en los navegadores web. | |
| Ogg | Theora Ogg. Desarrollado por la Fundación Xiph.Org. Soportado por HTML. | |
| WebM | Desarrollado por Mozilla, Opera, Adobe y Google. Soportado por HTML. |
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.
| Atributo | Descripcion |
|---|---|
| SRC | URL de la fuente del audio/video. |
| media | Acepta cualquier consulta de medios válida que normalmente se definiría en un CSS. |
| sizes | Especifica tamaños de imagen para diferentes diseños de página. |
| srcset | Especifica la URL de la imagen para usar en diferentes situaciones. Solo requerido para picture. |
| type | Especifica el tipo de fuente. |
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).
<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>
| Atributo | Descripcion |
|---|---|
| default | Especifica que la pista se habilitará si las preferencias del usuario no indican que otra pista sería más apropiada |
| kind | captions|chapters|descriptions|metadata|subtitles |
| label | Etiqueta |
| src | URL, fuente. |
| srclang | Idioma. Tiene que tener kind=subtitles. |