HTML Academy · Aula

O elemento source para vários formatos

Forneça formatos alternativos com o elemento source.

Aula 3 de 413 etapas

O elemento source para vários formatos é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Por que usar vários formatos?

Navegadores diferentes oferecem suporte a codecs de áudio e video diferentes:

WebM (VP9/VP8) — Chrome, Firefox, Edge (não Safari)
MP4 (H.264) — todos os navegadores (universal)
OGG — Firefox, Chrome (não Safari)
OPUS — Chrome, Firefox, Edge (não Safari)

O elemento <source> permite fornecer vários formatos como alternativa.

Origem dentro de áudio

Forneça vários formatos de áudio:

<audio controls>
  <!-- Browser picks the first format it supports: -->
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
  <source src="podcast.mp3" type="audio/mpeg">
  <!-- Fallback text if none supported: -->
  <p>Download: <a href="podcast.mp3">podcast.mp3</a></p>
</audio>

Origem dentro de video

Forneça vários formatos de video:

<video controls width="1280" height="720" poster="thumbnail.jpg">
  <source src="tutorial.webm" type="video/webm">
  <source src="tutorial.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video.
     <a href="tutorial.mp4">Download the video</a></p>
</video>

O atributo de tipo na origem

O atributo type informa ao navegador o tipo MIME e o codec:

<!-- Full MIME type with codec parameter: -->
<source src="video.webm" type="video/webm; codecs=vp9,vorbis">
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="audio.ogg" type="audio/ogg; codecs=vorbis">

<!-- Simplified (browser may need to probe): -->
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">

Como funciona a seleção de origens

O navegador avalia os elementos de origem na ordem:

Lê o type da primeira origem
Se puder reproduzir esse tipo, faz o download e o utiliza
Caso contrário, passa para a origem seguinte
Se nenhuma origem funcionar, exibe o conteúdo alternativo

Coloque primeiro o formato preferido (por exemplo, WebM para melhor desempenho no Chrome e no Firefox).

Atributo de mídia na origem

O atributo media permite disponibilizar formatos diferentes para áreas de visualização diferentes:

<video controls>
  <!-- Mobile: smaller file -->
  <source
    src="video-480.mp4"
    type="video/mp4"
    media="(max-width: 768px)"
  >
  <!-- Desktop: full quality -->
  <source
    src="video-1080.mp4"
    type="video/mp4"
  >
</video>

Ordem de formatos recomendada

Ordem ideal das origens para obter máxima compatibilidade e desempenho:

<video controls>
  <!-- AV1 in WebM: best compression, modern browsers -->
  <source src="video.av1.mp4" type="video/mp4; codecs=av01">

  <!-- VP9 in WebM: Chrome/Firefox/Edge -->
  <source src="video.webm" type="video/webm">

  <!-- H.264 in MP4: universal fallback -->
  <source src="video.mp4" type="video/mp4">
</video>

Recomendações de formatos de áudio

Recomendações de codecs de áudio:

OPUS em WebM — melhor relação entre qualidade e tamanho; Chrome, Firefox, Edge
AAC em MP4 — universal; Safari, Chrome, Firefox, Edge
MP3 — maior compatibilidade; use como última alternativa

Video responsivo com srcset

Para video, use media na origem para adaptar o uso da largura de banda:

<video controls poster="thumbnail.jpg">
  <source
    src="video-720.webm"
    type="video/webm"
    media="(min-width: 1024px)"
  >
  <source
    src="video-360.webm"
    type="video/webm"
  >
  <source src="video-720.mp4" type="video/mp4" media="(min-width: 1024px)">
  <source src="video-360.mp4" type="video/mp4">
</video>

Verificando canPlayType

Teste o suporte do navegador a codecs com JavaScript:

const video = document.createElement('video');

console.log(video.canPlayType('video/webm; codecs=vp9'));
// '' = no, 'maybe' = possibly, 'probably' = likely yes

console.log(video.canPlayType('video/mp4; codecs=avc1.42E01E'));
// 'probably' on most modern browsers

Conteúdo alternativo

Sempre inclua conteúdo alternativo dentro de áudio/video:

<video controls width="800" height="450">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">

  <!-- Fallback for browsers without video support: -->
  <p>
    Your browser does not support HTML5 video.
    <a href="demo.mp4">Download the video</a> instead.
  </p>
</video>

Verificação rápida

Em que ordem você deve listar os elementos de origem?

Responda na aula interativa

Recapitulação: elemento de origem

Elementos essenciais de origem:

<source src type> dentro de áudio/video fornece alternativas de formato
O navegador escolhe a primeira origem correspondente
Coloque primeiro o formato mais moderno; MP4/AAC como alternativa universal
Inclua texto ou link alternativo dentro de áudio/video depois de todas as origens
Use media na origem para selecionar video com base na área de visualização

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 40
Aulas: 159

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “O elemento source para vários formatos” é grátis?

Sim — o texto completo de “O elemento source para vários formatos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “O elemento source para vários formatos”?

Forneça formatos alternativos com o elemento source. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “O elemento source para vários formatos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

O elemento audio: src controls loop autoplay
O elemento video e a proporção da tela
O elemento source para vários formatos
Legendas com track e WebVTT

← Voltar para HTML Academy