Video e audio
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.
<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
- Prima di eseguire, immagina come apparirà il risultato nel browser.
- Spiega con parole tue in che modo “video e audio” risolve un problema concreto.
- Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
- Modifica un valore; confronta il comportamento e annota che cosa è cambiato.
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 · htmlL’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
<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?
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.