Multimedia en HTML
Aprende las etiquetas multimedia de HTML, los formatos de audio y vídeo compatibles con los navegadores, cómo servir múltiples fuentes, añadir subtítulos y gestionar la reproducción automática.
El multimedia es prácticamente todo lo que puedes escuchar o ver (por ejemplo, sonido, música, imágenes, grabaciones, vídeos, películas, animaciones, etc.). Existe en distintos formatos. Las páginas web pueden contener elementos multimedia de diferentes formatos y tipos.
Este capítulo ofrece una visión general de las etiquetas HTML que insertan contenido multimedia, los formatos de audio y vídeo que los navegadores realmente soportan, y los patrones prácticos que necesitas: servir múltiples formatos con <source>, añadir subtítulos para la accesibilidad y gestionar correctamente la reproducción automática.
Etiquetas multimedia
HTML permite añadir distintos archivos multimedia a tu sitio web mediante diversas etiquetas multimedia. Estas etiquetas incluyen:
<audio>para reproducir un archivo de audio en la página web,<video>para reproducir un archivo de vídeo en la página web,<source>para ofrecer varios archivos multimedia de modo que el navegador pueda elegir uno que soporte,<track>para añadir subtítulos o leyendas a un elemento<video>o<audio>,<embed>para incrustar contenido externo (habitualmente PDFs) en la página web,<object>para incrustar recursos externos — una etiqueta considerada mayoritariamente obsoleta hoy en día,<iframe>para incrustar otras páginas web.
A continuación se muestra un ejemplo básico que usa el atributo controls y etiquetas <source>:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>El texto entre las etiquetas de apertura y cierre ("Your browser does not support…") es el contenido alternativo. Solo se muestra si el navegador no puede reproducir el elemento en absoluto.
Por qué usar varios elementos <source>
Ningún formato de audio o vídeo es compatible con todos los navegadores. Para cubrirlos todos, se listan varios elementos <source> dentro de un único elemento <audio> o <video>. El navegador recorre la lista de arriba a abajo y utiliza la primera fuente cuyo formato puede reproducir, ignorando el resto. Por tanto, coloca el formato de mayor preferencia primero.
Un vídeo que funcione en todos los navegadores suele ofrecer tanto MP4 (soporte más amplio, incluyendo Safari) como WebM (libre, abierto y bien soportado en Chrome y Firefox):
<video width="640" height="360" controls poster="preview.jpg" preload="metadata">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video element.
</video>El atributo type permite al navegador omitir un formato que no soporta sin descargar el archivo primero, por lo que conviene incluirlo siempre.
Un elemento de audio sigue el mismo patrón. MP3 se reproduce en todos lados; Ogg es una alternativa libre compatible con Chrome y Firefox:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Subtítulos y accesibilidad
Usa el elemento <track> para añadir subtítulos o leyendas a un vídeo. Los subtítulos hacen que tu contenido sea accesible para espectadores sordos o con dificultades auditivas, y ayudan a cualquiera que vea el vídeo sin sonido. El atributo kind="captions" apunta a un archivo WebVTT (.vtt):
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="captions-en.vtt" kind="captions" srclang="en" label="English" default>
Your browser does not support the video element.
</video>Reproducción automática, poster y precarga
Algunos atributos de <video> merecen especial atención:
autoplay— inicia la reproducción automáticamente. Los navegadores modernos bloquean la reproducción automática con sonido, por lo que un clip solo se reproducirá automáticamente si también tienemuted:<video autoplay muted>.poster— una imagen que se muestra antes de que comience el vídeo (un fotograma de marcador de posición).preload— indica cuánto almacenar en búfer desde el principio:none,metadata(solo duración y dimensiones) oauto(el navegador puede cargar el archivo completo).
Incrustar otro contenido: <object> y <embed>
Dos etiquetas más antiguas permiten incrustar recursos externos. Hoy en día su función es limitada:
<object>era un contenedor de uso general para plugins y archivos externos. En la actualidad es mayoritariamente una etiqueta obsoleta — para audio y vídeo ordinarios debes usar<video>y<audio>en su lugar.<embed>también incrusta contenido externo, pero en las páginas modernas se usa principalmente para mostrar PDFs.
<embed src="document.pdf" type="application/pdf" width="600" height="400">Formatos multimedia
Los elementos multimedia como el audio o el vídeo se almacenan en archivos multimedia. Puedes identificar el tipo de archivo observando la extensión del archivo.
Las extensiones multimedia más comunes incluyen .mp3, .mp4, .webm, .ogg, .wav, .mpg, .wmv y .avi. (Es posible que todavía encuentres archivos Flash .swf, pero Flash está obsoleto — fue eliminado de todos los navegadores en 2020.)
Formatos de audio
El formato más reciente para música grabada comprimida es MP3. Este término es sinónimo de música digital.
MP3 es una buena opción si tu sitio web trata sobre música grabada.
| Formato | Archivo | Descripción |
|---|---|---|
| MIDI (Musical Instrument Digital Interface). | .mid .midi | Es el formato principal para todos los dispositivos de música electrónica (por ejemplo, sintetizadores y tarjetas de sonido de PC). Los archivos MIDI contienen notas digitales que pueden ser reproducidas por dispositivos electrónicos, pero no incluyen sonido. Se reproduce bien en hardware musical y ordenadores, pero no de forma nativa en navegadores web. Los navegadores modernos pueden gestionar MIDI mediante la Web Audio API. |
| RealAudio | .rm .ram | Permite la transmisión de audio con anchos de banda bajos. No se reproduce en navegadores web. |
| WMA | .wma | Este formato ha sido desarrollado por Microsoft y se utiliza habitualmente en reproductores de música. Se reproduce bien en ordenadores Windows, pero no en navegadores web. |
| AAC | .aac | Este formato ha sido desarrollado por Apple como formato predeterminado de iTunes. Los archivos .aac sin procesar tienen soporte limitado en navegadores, pero el audio AAC está ampliamente soportado cuando se empaqueta dentro de contenedores .mp4. |
| WAV | .wav | Este formato ha sido desarrollado por IBM y Microsoft. Se reproduce bien en los sistemas operativos Windows, Linux y Macintosh. Compatible con HTML5. |
| Ogg | .ogg | Este formato ha sido desarrollado por la Fundación Xiph.Org. Compatible con HTML5. |
| MP3 | .mp3 | Es el formato más popular para reproductores de música. El formato tiene buena compresión (archivos pequeños) y alta calidad. Compatible con todos los navegadores. |
| MP4 | .mp4 | Es un formato de vídeo que también puede usarse para audio. El vídeo MP4 es el formato de vídeo del futuro en internet, lo que lleva al soporte automático de audio MP4 en todos los navegadores. |
Un contenedor (como .mp4 u .ogg) es el envoltorio del archivo; el códec (como AAC, MP3 o Vorbis) es la forma en que se codifica el audio en su interior. Los navegadores se preocupan por ambos. En la práctica, para la web puedes confiar en MP3 (todos los navegadores) y Ogg (Chrome y Firefox). El audio AAC está ampliamente soportado cuando se entrega dentro de un contenedor .mp4.
Formatos de vídeo
| Formato | Archivo | Descripción |
|---|---|---|
| MPEG | .mpg .mpeg | Creado por el Moving Pictures Expert Group. Es el primer formato de vídeo popular en la web. No compatible con HTML5. |
| AVI (Audio Video Interleave) | .avi | Creado por Microsoft. Normalmente se usa en hardware de televisión y cámaras de vídeo. Se reproduce bien en ordenadores Windows, pero no en navegadores web. |
| WMV (Windows Media Video) | .wmv | Creado por Microsoft. Normalmente se usa en hardware de televisión y cámaras de vídeo. Se reproduce bien en ordenadores Windows, pero no en navegadores web. |
| QuickTime | .mov | Creado por Apple. Normalmente se usa en hardware de televisión y cámaras de vídeo. Se reproduce bien en ordenadores Apple, pero no en navegadores web. |
| RealVideo | .rm .ram | Creado por Real Media y permite la transmisión de vídeo con anchos de banda bajos. Todavía se usa para televisión por internet y vídeo en línea, pero no se reproduce en navegadores web. |
| Flash | .swf .flv | Obsoleto. Adobe Flash Player fue eliminado de todos los navegadores modernos en 2020. Este formato se considera actualmente una tecnología heredada y requiere emuladores de terceros para reproducirse. |
| Ogg Theora | .ogg | Creado por la Fundación Xiph.Org. Compatible con HTML5. |
| WebM | .webm | Creado por Mozilla, Opera, Google y Adobe. Compatible con HTML5. |
| MPEG-4 o MP4 | .mp4 | Creado por el Moving Pictures Expert Group. Se usa generalmente en hardware de televisión y cámaras de vídeo más recientes. Recomendado por YouTube. Compatible con todos los navegadores HTML5. |
Para el elemento <video> de HTML5, limítate a MP4 (vídeo H.264 + audio AAC — funciona en todas partes, incluyendo Safari), WebM y Ogg (ambos compatibles con Chrome y Firefox). Los elementos <source> de MP4 y WebM juntos cubren esencialmente todos los navegadores modernos.
Compatibilidad con navegadores
El audio y el vídeo son reproducidos de forma nativa por todos los navegadores modernos — no se necesitan plugins de terceros. La compatibilidad no es idéntica entre formatos, que es exactamente la razón por la que se ofrecen múltiples elementos <source>:
- Audio — MP3 y AAC (en
.mp4) funcionan en todos los navegadores principales, incluido Safari. Ogg/Vorbis funciona en Chrome y Firefox pero no en Safari. - Vídeo — MP4 (H.264) funciona en todas partes, incluido Safari. WebM y Ogg/Theora funcionan en Chrome y Firefox.
La combinación segura y de uso generalizado es MP4 + WebM para vídeo y MP3 + Ogg para audio.