HTML <fonte> Tag
Exemplo
Um reprodutor de áudio com dois arquivos de origem. O navegador escolherá o primeiro <source> que ele suporta:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A <source>tag é usada para especificar vários recursos de mídia para elementos de mídia, como
<video> , <audio> e <picture> .
A <source>tag permite especificar arquivos alternativos de vídeo/áudio/imagem que o navegador pode escolher, com base no suporte do navegador ou na largura da janela de visualização. O navegador escolherá o primeiro <source>
que ele suporta.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o elemento.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Atributos
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| type | MIME-type | Specifies the MIME-type of the resource |
Atributos Globais
A <source>tag também suporta os Atributos Globais em HTML .
Atributos do evento
A <source>tag também suporta os atributos de evento em HTML .
Mais exemplos
Exemplo
Use <source> dentro de <video> para reproduzir um vídeo:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Exemplo
Use <source> dentro de <picture> para definir imagens diferentes com base na largura da janela de visualização:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Páginas relacionadas
Tutorial HTML: Vídeo HTML
Tutorial HTML: Áudio HTML
Referência HTML DOM: objeto de origem
Configurações padrão de CSS
Nenhum.