4

Então... Existe uma diferença prática de quando utilizar com ou sem uma tag pai? por exemplo:

Usar a Tag sozinha: <audio src="/audio/music.mp3" controls></audio> Ou com uma tag filha pra executar a solicitação? Exemplo:

<audio controls>
        <source src="/audio/music.mp3" type="audio/mp3">
    </audio>

1 Resposta 1

6

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.

1
  • 1
    Obrigado pela resposta bem completa. Commented 20/10/2021 às 14:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .