Tag <fonte> em Html
Neste post, vamos discutir sobre a origem do Tag através de exemplos na expectativa de que satisfaça nossos requisitos.
A tag <source> em HTML é usada para especificar vários recursos de mídia para um elemento de mídia HTML, como <video> ou <audio> .
Um player para arquivos de áudio com duas fontes. Os navegadores selecionarão a primeira fonte que suportam:
Example:
Uso da tag <source>
Uma tag <source> é empregada para descrever uma variedade de fontes de mídia para vários tipos de mídia, por exemplo <video>, <audio> e <pictures> .
Ao escolher um arquivo alternativo de vídeo/áudio/imagem na tag <source> , você pode determinar qual arquivo o navegador escolherá dependendo do suporte do navegador ou da largura da janela de visualização. Ele selecionará a primeira fonte compatível.
Use <source> dentro de <video> para reproduzir um vídeo:
Example:
O pode ser usado dentro de uma imagem para definir imagens diferentes com base no tamanho da viewport, como segue:
Example:
O código a seguir exibirá um player de vídeo com diferentes fontes para diferentes qualidades de vídeo com base na velocidade da Internet do usuário:
Example:
Principais recursos da tag de origem
Aqui estão alguns dos principais recursos da tag <source> :
- A tag <source> permite que os desenvolvedores especifiquem várias fontes para um elemento de mídia, como diferentes formatos de arquivo ou diferentes resoluções. Isso garante que a mídia possa ser reproduzida em uma ampla variedade de dispositivos e plataformas.
- A tag <source> também permite que os desenvolvedores especifiquem uma ordem de preferência para as fontes de mídia. Isso significa que o elemento de mídia tentará reproduzir a primeira fonte primeiro e, se não for compatível, passará para a próxima fonte da lista.
- A tag <source> requer um atributo “type” que especifica o tipo MIME do recurso de mídia. Isso garante que o navegador possa interpretar e reproduzir a mídia adequadamente.
- Caso nenhuma das fontes especificadas na tag <source> seja suportada pelo navegador, os desenvolvedores podem incluir conteúdo alternativo dentro do elemento de mídia usando as tags <video> ou <audio> .
- Ao fornecer várias fontes para um elemento de mídia, os desenvolvedores podem garantir que o conteúdo seja acessível a usuários com diferentes dispositivos e recursos de rede. Isso pode ajudar a melhorar a experiência geral do usuário e garantir que o conteúdo seja acessível a um público mais amplo.
Atributos
Global
A Tag source <source> também aceita os Atributos Globais em HTML.
Evento
Tag source <source> também acomoda os Atributos de Evento em HTML.
Lista de Atributos
| Atributos | Valor | Visão geral |
|---|---|---|
| meios de comunicação | media_query | Ele oferece suporte a qualquer tipo de consulta de mídia normalmente especificada em CSS. |
| tamanhos | Define o tamanho das imagens para diferentes layouts de página. | |
| origem | URL | É essencial quando <source> é usado em <audio> e <video> . Forneça a URL do arquivo de mídia. |
| conjunto de origem | URL | Isso é necessário sempre que <source> for usado em <picture> . Forneça o URL de uma imagem específica, dependendo da situação. |
| tipo | tipo MIME | Indica o tipo MIME do recurso. |
Compatibilidade do navegador
Os números na tabela indicam a versão mais antiga do navegador totalmente compatível com o elemento.
| Elemento |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <fonte> | 4.0 | 9,0 | 3.5 | 4.0 | 10.5 |
Benefícios da tag de origem HTML
A tag <source> em HTML fornece vários benefícios, alguns deles são fornecidos abaixo:
- A tag <source> permite que os desenvolvedores forneçam várias versões de um arquivo de mídia, como diferentes formatos de arquivo de vídeo ou codecs de áudio, para garantir que a mídia possa ser reproduzida em uma ampla variedade de dispositivos e plataformas.
- Os desenvolvedores podem usar a tag <source> para especificar uma ordem de preferência para os arquivos de mídia, permitindo que o navegador selecione a melhor opção para o dispositivo do usuário e as condições de rede.
- Ao fornecer várias versões de um arquivo de mídia, os desenvolvedores podem garantir que o conteúdo seja acessível a usuários com diferentes dispositivos, tamanhos de tela e velocidades de rede.
- A tag <source> também fornece uma maneira de fornecer conteúdo alternativo, como uma mensagem ou uma imagem, caso nenhum dos arquivos de mídia especificados na tag sejam suportados pelo navegador.
- O uso da tag <source> pode ajudar a melhorar o desempenho de páginas da Web com muita mídia, garantindo que a versão correta do arquivo de mídia seja carregada para o dispositivo do usuário e as condições de rede, reduzindo o tempo de carregamento e melhorando a experiência geral do usuário.
