A tag <source>
não pode ser usada sozinha (sem a tag pai), ela é uma tag para ser usada como elementos filhos das tags <video>
, <audio>
e <picture>
e nos exemplos que apresentou não existem diferenças no resultado.
O objetivo da tag <source>
é fornecer diferentes recursos em formatos diferentes, claro que você pode usar de forma indevida, mostrando 2 vídeos visualmente diferentes, mas isso cabe a você como desenvolvedor decidir o que vai apresentar.
A tag pode ser usada para controlar qual recurso vai ser exibido baseado na resolução ou outro formato da visibilidade, isso através do atributo media=""
, que usa o mesmo formato das Media queries do CSS, como já deve saber, existem Media queries especificas de navegadores ou sistemas operacionais, mas isso é outra história, então baseado na resolução você pode apresentar um recurso diferente, no entanto isso é só suportado/válido quando o elemento pai for um <picture>
:
<picture>
<source srcset="resolucao-baixa.png" media="(max-width: 800px)">
<source srcset="resolucao-media.png" media="(max-width: 1300px)">
<img src="resolucao-alta.png" alt="foo bar">
</picture>
Note que o endereço de imagens em <picture>
devem ser definidos com
o atributo srcset
nos elementos <source>
.
No exemplo a tag <img>
serve de fallback para navegadores sem suporte e para acaso a resolução não "case" com os elementos <source>
(existe outro meio de tratar resoluções de imagem baseado em tamanhos, mas isso irei citar em outra resposta, talvez já tenha no site).
Em resumo, os atributos usados pelo elemento <source>
:
src=""
usado quando o elemento pai for <video>
ou <audio>
srcset=""
usado quando o elemento pai for <picture>
sizes=""
usado quando o elemento pai for <picture>
media=""
usado quando o elemento pai for <picture>
Voltando ao <audio>
, nem todo sistema operacional ou navegador suporta todos formatos de áudios, então o uso de <source>
resolve esse caso, como exemplo:
<audio>
<source src="foobar.mp3" type="audio/mpeg">
<source src="foobar.ogg" type="audio/ogg">
<p>Seu navegador não suporta áudio</p>
</audio>
O mesmo pode ser feito com vídeo, inclusive com vídeo é mais comum. Apesar de certos navegadores serem afirmados tendo suporte, muitos na verdade alguns dependem dos codecs instalados no sistema operacional (o que o usuário pode fazer, mas não é garantido, justamente por depender disso).
Para ver sobre os formatos de áudio e vídeo suportados por diferentes navegadores recomendo que use o caniuse:
Note que além do type=""
é usado para ajudar o navegador a identificar se o formato é suportado, antes de fazer o "download", você também pode (ou talvez precise) definir o parâmetro ; codecs=
junto ao MIME-type dentro do atributo type=""
, pois pode ser necessário para o navegador saber exatamente como o recurso é codificado:
Áudio Vorbis sozinho em um "container" Ogg
<source src="audio.ogg" type="audio/ogg; codecs=vorbis">
Áudio Speex sozinho em um "container" Ogg
<source src="audio.spx" type="audio/ogg; codecs=speex">
Áudio FLAC sozinho em um "container" Ogg
<source src="audio.oga" type="audio/ogg; codecs=flac">
Apesar dos exemplos das extensões, elas não definem o conteúdo, são
apenas extensões e são usadas para ajudar o sistema operacional a
"adivinhar" o conteúdo, ou para servidores web fornecerem o
Content-Type
adequado em respostas HTTP.
Em resumo, o uso da tag <source>
depende de como você, o desenvolvedor, configura e fornece os recursos, você é livre para escrever "errado" é claro, ou de forma redundante, mas é claro que aprender o básico e aplicar de forma correta será o que irá fazer isso funcionar para o usuário.