Tag HTML <source>

Definizione e uso

<source> I tag sono usati per definire elementi multimediali (come <video>,<audio> e <picture>）Specificare più risorse multimediali.

<source> I tag permettono di specificare file video/audio/immagine alternativi, che il browser può scegliere in base al supporto o alla larghezza del viewport. Il browser sceglierà il primo che supporta. <source>.

Vedi anche:

Tutorial HTML:Video HTML

Tutorial HTML:Audio HTML

Manuale di riferimento HTML DOM:Oggetto Source

Esempio

Esempio 1

Questo è un riproduttore audio con due file di origine. Il browser sceglierà il primo che supporta. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Il tuo browser non supporta il tag audio.
</audio>

Prova personalmente

Esempio 2

Usare in <video> <source> Riproduci il video:

<video larghezza="640" altezza="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Il tuo browser non supporta il tag video.
</video>

Prova personalmente

Esempio 3

Usare in <picture> <source> Definire diverse immagini in base alla larghezza del viewport:

<picture>
  <source media="(larghezza-minima:650px)" srcset="flowers-1.jpg">
  <source media="(larghezza-minima:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Fiori" style="larghezza:auto;">
</picture>

Prova personalmente

Proprietà

Proprietà Valore Descrizione
media Query di media Accetta qualsiasi query di media valida, generalmente definita nel CSS.
sizes Specificare la dimensione dell'immagine per diversi layout di pagina.
src URL

Usato per specificare l'URL del file multimediale.

Quando <source> viene utilizzato per <audio> e <video>, questa proprietà è obbligatoria.
srcset URL

Utilizzato per specificare l'URL dell'immagine da utilizzare in diverse situazioni.

Questa proprietà è obbligatoria quando <source> viene utilizzato con <picture>.
type Tipo MIME Definisce il tipo MIME della risorsa.

Proprietà globali

<source> Il tag supporta anche Proprietà globali in HTML.

Proprietà evento

<source> Il tag supporta anche Proprietà evento in HTML.

Impostazioni CSS predefinite

Nessuno.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta per la prima volta questa proprietà.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5