Tag HTML <source>
Usa il tag <source> per definire più risorse multimediali in formati diversi: video, audio o immagine. Esempi e sintassi.
Il tag HTML <source> specifica una delle diverse risorse multimediali alternative per un elemento <picture>, <audio> o <video>. È un elemento vuoto (void): non ha contenuto né tag di chiusura.
Questa pagina spiega perché utilizzare <source> al posto di un singolo attributo src, dove è consentito e come il browser decide quale sorgente caricare.
Perché usare <source> invece di un semplice src?
Un singolo attributo src punta esattamente a un file. L'elemento <source> ti consente di offrire al browser un elenco di candidati, in modo che possa scegliere il migliore tra quelli effettivamente supportati. Il browser legge i figli <source> in ordine e utilizza il primo che riesce a riprodurre o visualizzare — gli altri vengono ignorati.
Questo risolve due problemi concreti:
- Fallback di formato per
<video>e<audio>. Nessun formato video o audio è supportato da tutti i browser. Elencando diverse codifiche (ad esempio WebM e MP4), ogni browser riproduce il primo formato che comprende. - Immagini responsive e art-directed per
<picture>. Usando gli attributimediaesrcset, puoi servire un'immagine diversa — o con un ritaglio differente — in base alle dimensioni del viewport o alla risoluzione dello schermo.
L'elemento <source> è uno degli elementi HTML5 e può comparire più volte all'interno di un singolo elemento genitore per elencare le alternative disponibili.
Sintassi
Il tag <source> è vuoto, il che significa che il tag di chiusura non è richiesto. Ma in XHTML, il tag (<source>) deve essere chiuso (<source/>).
Esempio di <source> all'interno di un elemento <picture>
Nota che <source> non accetta un attributo alt. Il testo alternativo appartiene sempre all'elemento <img> di fallback, che è anche ciò che i browser più vecchi visualizzano.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
<source media="(min-width: 430px)" srcset="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3Docs logo" style="width:auto;" />
</picture>
<p>The browser loads the first <source> whose media query matches. If none match, it falls back to the <img> element.</p>
</body>
</html>Esempio di <source> all'interno di un elemento <video>
Qui il browser prova prima il file WebM; se non riesce a riprodurlo, passa al file MP4. L'attributo type consente al browser di saltare un formato non supportato senza scaricarlo.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<p>Some information about the video.</p>
</body>
</html>Esempio di <source> all'interno di un elemento <audio>
La stessa logica di fallback dei formati si applica all'audio. Il browser riproduce la prima codifica supportata; il testo dopo le sorgenti viene mostrato solo se <audio> non è supportato affatto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.ogg" type="audio/ogg" />
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<p>Some information about the audio.</p>
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
media | Media query CSS, ad es. (min-width: 768px) | Solo per <picture>. Il browser usa questa sorgente quando la media query corrisponde. |
sizes | Una o più dimensioni, ad es. (max-width: 600px) 480px, 800px | Solo per <picture>. Descrive quanto sarà larga l'immagine visualizzata, in modo che il browser possa scegliere il candidato corretto da srcset. |
src | URL | L'indirizzo del file multimediale. Usato all'interno di <audio> e <video>. |
srcset | URL o lista di URL separati da virgola con descrittori di larghezza/densità | Solo per <picture>. Elenca i candidati immagine per risoluzioni o dimensioni dello schermo diverse. |
type | Un tipo MIME, ad es. video/webm, video/mp4, audio/ogg, audio/mpeg, image/webp | Il tipo MIME della risorsa. Consente al browser di saltare i formati che non riesce a gestire. |
Il tag <source> supporta anche gli Attributi Globali e gli Attributi di Evento.