O que faz a tag source?

Por / 4 de agosto de 2024

O que faz a tag source?

A tag <source> é usada em HTML para especificar múltiplos recursos de mídia para elementos como <video>, <audio> e <picture>.

Ela permite que você forneça diferentes versões de um recurso de mídia, permitindo ao navegador escolher a versão mais adequada com base em suas capacidades e preferências do usuário.

Maximize Seu Impacto com Ebooks PLR

Maximize Seu Impacto com Ebooks PLR

Descubra como e-books PLR podem aumentar sua autoridade e gerar leads qualificados. Clique e saiba mais!

Saiba Mais...

Uso com <video> e <audio>

Ao usar <source> com elementos de mídia, você pode fornecer diferentes formatos do mesmo arquivo de vídeo ou áudio, garantindo compatibilidade com uma ampla gama de navegadores e dispositivos.

Exemplo com <video>:

html

<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Seu navegador não suporta o elemento de vídeo.
</video>

Exemplo com <audio>:

html

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

Uso com <picture>

Ao usar <source> com <picture>, você pode especificar diferentes versões de uma imagem para diferentes resoluções de tela ou situações, como imagens responsivas.

Exemplo com <picture>:

html

<picture>
Ebook PLR: Lucre nas Redes Sociais

Ebook PLR: Lucre nas Redes Sociais

Transforme PLRs em renda passiva com estratégias comprovadas. Aumente suas conversões agora!

Saiba Mais...

<source srcset="imagem-grande.jpg" media="(min-width: 800px)">
<source srcset="imagem-pequena.jpg" media="(max-width: 799px)">
<img src="imagem-padrao.jpg" alt="Descrição da imagem">
</picture>

Atributos da tag <source>

  • src: Define o URL do arquivo de mídia.
  • type: Especifica o tipo de mídia (por exemplo, video/mp4, audio/mpeg, image/webp).
  • srcset: Usado principalmente com <picture> para fornecer diferentes resoluções da mesma imagem.
  • media: Define as condições para a aplicação do recurso, como consultas de mídia (media queries).

Considerações

  • Compatibilidade: Usar múltiplas tags <source> garante que seu conteúdo de mídia seja compatível com a maioria dos navegadores.
  • Fallback: É importante fornecer um fallback dentro dos elementos <video> ou <audio>, caso o navegador não suporte nenhuma das fontes especificadas.

A tag <source> é uma ferramenta poderosa para criar conteúdo de mídia adaptável e compatível com diversos navegadores e dispositivos, garantindo uma melhor experiência do usuário.

Visitada 9 vezes, 1 Visita(s) hoje
Rolar para cima