Etiqueta HTML <source>
Usa la etiqueta <source> para definir múltiples recursos multimedia en distintos formatos: video, audio o imagen. Aprende con ejemplos y sintaxis.
La etiqueta HTML <source> especifica uno de varios recursos multimedia alternativos para un elemento <picture>, <audio> o <video>. Es un elemento vacío (void): no tiene contenido ni etiqueta de cierre.
Esta página explica por qué usarías <source> en lugar de un único atributo src, dónde está permitido y cómo el navegador decide qué fuente cargar.
¿Por qué usar <source> en lugar de un src simple?
Un único atributo src apunta exactamente a un archivo. El elemento <source> te permite ofrecer al navegador una lista de candidatos para que elija el mejor que realmente admite. El navegador lee los hijos <source> en orden y usa el primero que puede reproducir o mostrar — los demás se ignoran.
Esto resuelve dos problemas reales:
- Alternativas de formato para
<video>y<audio>. Ningún formato de video o audio es compatible con todos los navegadores. Al listar varias codificaciones (por ejemplo, WebM y MP4), cada navegador reproduce el primer formato que entiende. - Imágenes responsivas y con dirección de arte para
<picture>. Usando los atributosmediaysrcset, puedes servir una imagen diferente —o una recortada de manera distinta— según el tamaño del viewport o la resolución de pantalla.
El elemento <source> es uno de los elementos HTML5 y puede aparecer varias veces dentro de un único elemento padre para listar las alternativas disponibles.
Sintaxis
La etiqueta <source> está vacía, lo que significa que la etiqueta de cierre no es necesaria. Sin embargo, en XHTML, la etiqueta (<source>) debe cerrarse (<source/>).
Ejemplo de <source> dentro de un elemento <picture>
Ten en cuenta que <source> no admite el atributo alt. El texto alternativo siempre pertenece al elemento <img> de reserva, que también es lo que muestran los navegadores más antiguos.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
<source media="(min-width: 430px)" srcset="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3Docs logo" style="width:auto;" />
</picture>
<p>The browser loads the first <source> whose media query matches. If none match, it falls back to the <img> element.</p>
</body>
</html>Ejemplo de <source> dentro de un elemento <video>
Aquí el navegador prueba primero el archivo WebM; si no puede reproducir WebM, recurre al archivo MP4. El atributo type permite al navegador omitir un formato que no admite sin descargarlo.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<p>Some information about the video.</p>
</body>
</html>Ejemplo de <source> dentro de un elemento <audio>
La misma lógica de alternativas de formato se aplica al audio. El navegador reproduce la primera codificación que admite; el texto después de las fuentes solo se muestra si <audio> no es compatible en absoluto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.ogg" type="audio/ogg" />
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<p>Some information about the audio.</p>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
media | Consulta de medios CSS, p. ej. (min-width: 768px) | Solo para <picture>. El navegador usa esta fuente cuando la consulta de medios coincide. |
sizes | Uno o más tamaños, p. ej. (max-width: 600px) 480px, 800px | Solo para <picture>. Describe el ancho con el que se mostrará la imagen para que el navegador pueda elegir el candidato correcto de srcset. |
src | URL | La dirección del archivo multimedia. Se usa dentro de <audio> y <video>. |
srcset | URL o lista de URL separadas por comas con descriptores de ancho/densidad | Solo para <picture>. Lista candidatos de imagen para diferentes resoluciones o tamaños de pantalla. |
type | Un tipo MIME, p. ej. video/webm, video/mp4, audio/ogg, audio/mpeg, image/webp | El tipo MIME del recurso. Permite al navegador omitir formatos que no puede manejar. |
La etiqueta <source> también admite los Atributos Globales y los Atributos de Evento.