Tag HTML <source>
Use a tag <source> para definir múltiplos recursos de mídia em diferentes formatos: vídeo, áudio ou imagem. Aprenda com exemplos e Sintaxe.
A tag HTML <source> especifica um de vários recursos de mídia alternativos para um elemento <picture>, <audio> ou <video>. É um elemento vazio (void): não possui conteúdo nem tag de fechamento.
Esta página explica por que você usaria <source> em vez de um único atributo src, onde ele é permitido e como o navegador decide qual fonte carregar.
Por que usar <source> em vez de um simples src?
Um único atributo src aponta para exatamente um arquivo. O elemento <source> permite oferecer ao navegador uma lista de candidatos para que ele possa escolher o melhor que realmente suporta. O navegador lê os filhos <source> em ordem e usa o primeiro que consegue reproduzir ou exibir — os demais são ignorados.
Isso resolve dois problemas reais:
- Fallbacks de formato para
<video>e<audio>. Nenhum formato de vídeo ou áudio é suportado por todos os navegadores. Ao listar várias codificações (por exemplo, WebM e MP4), cada navegador reproduz o primeiro formato que entende. - Imagens responsivas e com direção de arte para
<picture>. Usando os atributosmediaesrcset, você pode servir uma imagem diferente — ou uma com recorte diferente — dependendo do tamanho do viewport ou da resolução de exibição.
O elemento <source> é um dos elementos HTML5 e pode aparecer várias vezes dentro de um único elemento pai para listar as alternativas disponíveis.
Sintaxe
A tag <source> é vazia, o que significa que a tag de fechamento não é obrigatória. Porém, em XHTML, a tag (<source>) deve ser fechada (<source/>).
Exemplo de <source> dentro de um elemento <picture>
Observe que <source> não aceita um atributo alt. O texto alternativo sempre pertence ao elemento <img> de fallback, que também é o que os navegadores mais antigos exibem.
<!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>Exemplo de <source> dentro de um elemento <video>
Aqui o navegador tenta o arquivo WebM primeiro; se não conseguir reproduzir WebM, recorre ao arquivo MP4. O atributo type permite que o navegador ignore um formato que não suporta sem precisar baixá-lo.
<!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>Exemplo de <source> dentro de um elemento <audio>
A mesma lógica de fallback de formato se aplica ao áudio. O navegador reproduz a primeira codificação que suporta; o texto após as fontes é exibido apenas se <audio> não for suportado.
<!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 | Descrição |
|---|---|---|
media | Consulta de mídia CSS, ex.: (min-width: 768px) | Apenas para <picture>. O navegador usa esta fonte quando a consulta de mídia corresponde. |
sizes | Um ou mais tamanhos, ex.: (max-width: 600px) 480px, 800px | Apenas para <picture>. Descreve a largura com que a imagem será exibida para que o navegador possa escolher o candidato correto em srcset. |
src | URL | O endereço do arquivo de mídia. Usado dentro de <audio> e <video>. |
srcset | URL ou lista de URLs separadas por vírgula com descritores de largura/densidade | Apenas para <picture>. Lista candidatos de imagem para diferentes resoluções ou tamanhos de tela. |
type | Um tipo MIME, ex.: video/webm, video/mp4, audio/ogg, audio/mpeg, image/webp | O tipo MIME do recurso. Permite que o navegador ignore formatos que não consegue processar. |
A tag <source> também suporta os Atributos Globais e os Atributos de Evento.