CodeStart.it
Corsi HTML Video e audio
Torre · Approfondisci · Capitolo 12 di 15

Video e audio

HTMLLettura + laboratorioCorso gratuito
Che cosa imparerai

HTML permette di inserire media con controlli nativi senza dipendere da plugin proprietari.

1. Il concetto, spiegato da zero

HTML permette di inserire media con controlli nativi senza dipendere da plugin proprietari.

video e audio possono mostrare controlli; track collega sottotitoli. Fornisci contenuti alternativi e trascrizioni dove necessario.

2. Un esempio ragionato

Osserva l’esempio e leggi ogni istruzione nell’ordine. Prima di provarlo, fermati a prevedere cosa succederà; capire il motivo del risultato è più importante che memorizzare la sintassi.

Codice di esempio · HTML
<figure>
 <video controls width="260" preload="none">
  <source src="lezione.mp4" type="video/mp4">
  Il browser non supporta questo video.
 </video>
 <figcaption>Video dimostrativo (file non incluso).</figcaption>
</figure>

Come leggere questo esempio

  1. Prima di eseguire, immagina come apparirà il risultato nel browser.
  2. Spiega con parole tue in che modo “video e audio” risolve un problema concreto.
  3. Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
  4. Modifica un valore; confronta il comportamento e annota che cosa è cambiato.
Errore frequente
Autoplay con audio può disturbare e viene spesso bloccato dai browser. Evitalo nei corsi.

3. Adesso tocca a te

Obiettivo dell’esercizio: Prepara un lettore video accessibile con controlli.

Puoi partire dall’esempio, riprodurlo e poi modificarlo. La soluzione di riferimento è disponibile sotto, ma conviene aprirla soltanto dopo un primo tentativo.

Laboratorio: metti alla prova il codice

HTML · html

L’anteprima è isolata dal sito principale: non inserire password o dati personali nel codice di prova.

Output / esito del controllo

Il risultato comparirà qui.
Mostra la soluzione di riferimento
Codice di esempio · HTML
<figure>
 <video controls width="260" preload="none">
  <source src="lezione.mp4" type="video/mp4">
  Il browser non supporta questo video.
 </video>
 <figcaption>Video dimostrativo (file non incluso).</figcaption>
</figure>

Confronta il tuo procedimento con quello dell’esempio. Una soluzione differente può essere altrettanto valida se produce risultati corretti.

4. Verifica e ripasso

Quiz: hai capito il concetto?

Quale delle seguenti affermazioni è corretta per questo capitolo?

Seleziona una risposta

Promemoria

video e audio possono mostrare controlli; track collega sottotitoli. Fornisci contenuti alternativi e trascrizioni dove necessario.

5. Come proseguire

Prima del capitolo successivo, prova a spiegare il concetto a un amico senza leggere il codice. Se non riesci, torna all’esempio e fai una nuova variante: imparare significa anche sperimentare.

← Capitolo precedente