<source>: l'elemento "Media" o "Image Source"
L' elemento HTML <source> specifica più risorse multimediali per <video>, l'elemento <picture> o l'elemento <audio>. È un elemento vuoto, il che significa che non ha contenuto e non ha un tag di chiusura. Viene comunemente utilizzato per offrire lo stesso contenuto multimediale in più formati di file al fine di fornire compatibilità con un'ampia gamma di browser, dato il loro diverso supporto per formati di file immagine e formati di file multimediali .
Attributi
Se l'attributo type non è specificato, il tipo di supporto viene recuperato dal server e verificato per vedere se l'interprete può gestirlo; se non può essere renderizzato, <source> viene selezionato il successivo. Se l'attributo type è specificato, viene confrontato con i tipi che l'agente utente può presentare e, se non viene riconosciuto, il server non viene nemmeno interrogato; invece, l'elemento <source> successivo viene controllato immediatamente.
Quando viene utilizzato nel contesto di un elemento <picture>, il browser tornerà a utilizzare l'immagine specificata dal figlio <picture> dell'elemento <img> se non è in grado di trovare un'immagine adatta da utilizzare dopo aver esaminato ogni <source>.
type
Il tipo di supporto MIME della risorsa , facoltativamente con un parametro codecs.
src
Obbligatorio se il padre dell'elemento source è un elemento <audio> e <video>, ma non consentito se il padre dell'elemento source è un elemento <picture>.
Indirizzo della risorsa multimediale.
srcset
Obbligatorio se il padre dell'elemento source è un elemento <picture>, ma non consentito se il padre dell'elemento source è un elemento <audio> o <video>.
Un elenco di una o più stringhe, separate da virgole, che indica un insieme di possibili immagini rappresentate dalla sorgente per l'utilizzo da parte del browser. Ogni stringa è composta da:
- Un URL che specifica un'immagine.
- Un descrittore di larghezza, che consiste in una stringa contenente un intero positivo seguito direttamente da "w", ad esempio 300w. Il valore predefinito, se mancante, è l'infinito.
- Un descrittore di densità di pixel, ovvero un numero mobile positivo seguito direttamente da "x". Il valore predefinito, se mancante, è 1x.
Ogni stringa nell'elenco deve avere almeno un descrittore di larghezza o un descrittore di densità di pixel per essere valida. Nell'elenco, deve esserci solo una stringa contenente la stessa tupla di descrittore di larghezza e descrittore di densità di pixel. Il browser sceglie l'immagine più adeguata da visualizzare in un determinato momento.
sizes
Consentito se il padre dell'elemento source è un elemento <picture>, ma non consentito se il padre dell'elemento source è un elemento <audio> o <video>.
Un elenco di dimensioni dell'origine che descrive la larghezza di rendering finale dell'immagine rappresentata dall'origine. Ciascuna dimensione di origine è costituita da un elenco separato da virgole di coppie condizione-lunghezza del supporto. Queste informazioni vengono utilizzate dal browser per determinare, prima di impaginare la pagina, quale immagine definire da utilizzare. Tieni presente che sizes avrà effetto solo se i descrittori delle dimensioni della larghezza vengono forniti con srcset anziché con valori di rapporto pixel (200w invece di 2x per esempio).
media
Consentito se il padre dell'elemento source è un elemento <picture>, ma non consentito se il sourcepadre dell'elemento è un elemento <audio> o <video>.
height
Consentito se il padre dell'elemento source è un elemento <picture>, ma non consentito se il sourcepadre dell'elemento è un elemento <audio> o <video>.
L'altezza intrinseca dell'immagine, in pixel. Deve essere un numero intero senza unità.
width
Consentito se il sourcepadre dell'elemento è un elemento <picture>, ma non consentito se il sourcepadre dell'elemento è un elemento <audio> o <video>.
Note d'uso
L'elemento <source> è un elemento vuoto (o elemento void) , il che significa che non solo non ha contenuto ma non ha anche tag di chiusura. Cioè, non usi mai " </source>" nel tuo HTML.
Esempi
Esempi di video
Questo esempio mostra come offrire un video in formato Ogg per gli utenti i cui browser supportano il formato Ogg e un video in formato QuickTime per gli utenti i cui browser lo supportano. Se l' elemento audio o video non è supportato dal browser, viene visualizzato un avviso. Se il browser supporta l'elemento ma non supporta nessuno dei formati specificati, viene generato un evento error e i controlli multimediali predefiniti (se abilitati) indicheranno un errore.
<video controls>
<source src="foo.webm" type="video/webm">
<source src="foo.ogg" type="video/ogg">
<source src="foo.mov" type="video/quicktime">
Mi dispiace ma il tuo browser sembra non supportare i formati del video.
</video>
Esempio di immagine
In questo esempio, due elementi <source> sono inclusi all'interno di <picture>, fornendo versioni di un'immagine da utilizzare quando lo spazio disponibile supera determinate larghezze. Se la larghezza disponibile è inferiore alla più piccola di queste larghezze, il programma utente ricadrà sull'immagine fornita dall'elemento <img>.
<picture>
<source srcset="freeattitude-logo-largo.png" media="(min-width: 800px)">
<source srcset="freeattitude-logo-medio.png" media="(min-width: 600px)">
<img src="freeattitude-logo.png" alt="FreeAttitude Docs">
</picture>
Con l'elemento <picture>, devi sempre includere un <img> con un'immagine di riserva, con un attributo alt per garantire l'accessibilità (a meno che l'immagine non sia un'immagine decorativa di sfondo irrilevante).