Tag HTML <sorgente>
Esempio
Un lettore audio con due file sorgente. Il browser sceglierà la prima <sorgente> supportata:
<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>
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
Il <source>tag viene utilizzato per specificare più risorse multimediali per elementi multimediali, come
<video> , <audio> e <picture> .
Il <source>tag consente di specificare file video/audio/immagine alternativi tra cui il browser può scegliere, in base al supporto del browser o alla larghezza del viewport. Il browser sceglierà il primo <source>
che supporta.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente l'elemento.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Attributi
| 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 |
Attributi globali
Il <source>tag supporta anche gli attributi globali in HTML .
Attributi dell'evento
Il <source>tag supporta anche gli attributi dell'evento in HTML .
Altri esempi
Esempio
Usa <sorgente> all'interno di <video> per riprodurre un video:
<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>
Esempio
Usa <source> all'interno di <picture> per definire immagini diverse in base alla larghezza del viewport:
<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>
Pagine correlate
Esercitazione HTML: Video HTML
Esercitazione HTML: Audio HTML
Riferimento HTML DOM: Oggetto sorgente
Impostazioni CSS predefinite
Nessuno.