0Pricing
HTML Academy · Lezione

L’elemento source per più formati

Fornire formati alternativi con l’elemento source

L’elemento source per più formati è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Perché più formati?

Browser diversi supportano codec audio/video diversi:

  • WebM (VP9/VP8) — Chrome, Firefox ed Edge (non Safari)
  • MP4 (H.264) — tutti i browser (universale)
  • OGG — Firefox e Chrome (non Safari)
  • OPUS — Chrome, Firefox ed Edge (non Safari)

L'elemento <source> consente di fornire più formati come fallback.

source nell'elemento audio

Fornite più formati audio:

<audio controls>
  <!-- Browser picks the first format it supports: -->
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
  <source src="podcast.mp3" type="audio/mpeg">
  <!-- Fallback text if none supported: -->
  <p>Download: <a href="podcast.mp3">podcast.mp3</a></p>
</audio>

source nell'elemento video

Fornite più formati video:

<video controls width="1280" height="720" poster="thumbnail.jpg">
  <source src="tutorial.webm" type="video/webm">
  <source src="tutorial.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video.
     <a href="tutorial.mp4">Download the video</a></p>
</video>

L'attributo type su source

L'attributo type indica al browser il tipo MIME e il codec:

<!-- Full MIME type with codec parameter: -->
<source src="video.webm" type="video/webm; codecs=vp9,vorbis">
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="audio.ogg" type="audio/ogg; codecs=vorbis">

<!-- Simplified (browser may need to probe): -->
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">

Come funziona la selezione di source

Il browser valuta gli elementi source nell'ordine:

  1. Legge il type del primo source
  2. Se può riprodurre quel tipo, lo scarica e lo usa
  3. Altrimenti passa al source successivo
  4. Se nessun source funziona, mostra il contenuto di fallback

Inserite per primo il formato preferito, ad esempio WebM per le prestazioni su Chrome/Firefox.

Attributo media su source

L'attributo media consente di fornire formati diversi per viewport diversi:

<video controls>
  <!-- Mobile: smaller file -->
  <source
    src="video-480.mp4"
    type="video/mp4"
    media="(max-width: 768px)"
  >
  <!-- Desktop: full quality -->
  <source
    src="video-1080.mp4"
    type="video/mp4"
  >
</video>

Ordine consigliato dei formati

Ordine ottimale dei source per massimizzare compatibilità e prestazioni:

<video controls>
  <!-- AV1 in WebM: best compression, modern browsers -->
  <source src="video.av1.mp4" type="video/mp4; codecs=av01">

  <!-- VP9 in WebM: Chrome/Firefox/Edge -->
  <source src="video.webm" type="video/webm">

  <!-- H.264 in MP4: universal fallback -->
  <source src="video.mp4" type="video/mp4">
</video>

Consigli sui formati audio

Consigli sui codec audio:

  • OPUS in WebM — miglior rapporto qualità/dimensioni; Chrome, Firefox ed Edge
  • AAC in MP4 — universale; Safari, Chrome, Firefox ed Edge
  • MP3 — massima compatibilità; usatelo come ultimo fallback

Video responsive con srcset

Per i video, usate media su source per adattare la qualità alla larghezza di banda:

<video controls poster="thumbnail.jpg">
  <source
    src="video-720.webm"
    type="video/webm"
    media="(min-width: 1024px)"
  >
  <source
    src="video-360.webm"
    type="video/webm"
  >
  <source src="video-720.mp4" type="video/mp4" media="(min-width: 1024px)">
  <source src="video-360.mp4" type="video/mp4">
</video>

Verificare canPlayType

Testate il supporto del browser ai codec con JavaScript:

const video = document.createElement('video');

console.log(video.canPlayType('video/webm; codecs=vp9'));
// '' = no, 'maybe' = possibly, 'probably' = likely yes

console.log(video.canPlayType('video/mp4; codecs=avc1.42E01E'));
// 'probably' on most modern browsers

Contenuto di fallback

Includete sempre contenuto di fallback all'interno di audio/video:

<video controls width="800" height="450">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">

  <!-- Fallback for browsers without video support: -->
  <p>
    Your browser does not support HTML5 video.
    <a href="demo.mp4">Download the video</a> instead.
  </p>
</video>

Controllo rapido

In quale ordine bisogna elencare gli elementi source?

Riepilogo: elemento source

Elementi essenziali dell'elemento source:

  • <source src type> all'interno di audio/video fornisce alternative di formato
  • Il browser sceglie il primo source corrispondente
  • Prima il formato più moderno; MP4/AAC come fallback universale
  • Includete testo/link di fallback all'interno di audio/video dopo tutti i source
  • Usate media su source per selezionare i video in base al viewport

Domande Frequenti

La lezione «L’elemento source per più formati» è gratuita?

Sì — il testo completo di «L’elemento source per più formati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «L’elemento source per più formati»?

Fornire formati alternativi con l’elemento source Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «L’elemento source per più formati»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. L’elemento audio: src controls loop autoplay
  2. L’elemento video e le proporzioni
  3. L’elemento source per più formati
  4. Sottotitoli con track e WebVTT
← Torna a HTML Academy