Etiqueta <source> de HTML

Definição e uso

<source> As tags são usadas para especificar elementos de mídia (como <video>,<audio> E <picture>）Especificar múltiplas fontes de mídia.

<source> A tag permite que você especifique arquivos de vídeo/áudio/imagem alternativos, que o navegador pode escolher com base no suporte do navegador ou na largura da viewport. O navegador escolherá o primeiro que ele suporta. <source>.

Veja também:

Tutorial de HTML:Vídeo HTML

Tutorial de HTML:Áudio HTML

Manual de referência do DOM HTML:Objeto Source

Exemplo

Exemplo 1

Este é um reprodutor de áudio com dois arquivos de fonte. O navegador escolherá o primeiro que ele suporta. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Seu navegador não suporta a tag de áudio.
</audio>

Experimente pessoalmente

Exemplo 2

Usado em <video> <source> Reproduzir vídeo:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Seu navegador não suporta o tag de vídeo.
</video>

Experimente pessoalmente

Exemplo 3

Usado em <picture> <source> Para definir diferentes imagens com base na largura da viewport:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flores" style="width:auto;">
</picture>

Experimente pessoalmente

Atributo

Atributo Valor Descrição
media Consulta de mídia Aceita qualquer consulta de mídia válida, geralmente definida em CSS.
sizes Especifica o tamanho da imagem para diferentes layouts de página.
src URL

Usado para especificar o URL do arquivo de mídia.

Quando <source> é usado em <audio> e <video>, este atributo é obrigatório.
srcset URL

Usado para especificar a URL da imagem a ser usada em diferentes situações.

Quando <source> é usado no <picture>, esse atributo é obrigatório.
type Tipo MIME Define o tipo MIME do recurso.

Atributos globais

<source> A etiqueta também suporta Atributos globais no HTML.

Atributos de evento

<source> A etiqueta também suporta Atributos de evento no HTML.

Configuração CSS padrão

Nenhum.

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou completamente essa propriedade pela primeira vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5