In HTML, gli elementi <audio> e <video> permettono di incorporare file multimediali come audio e video direttamente nelle pagine web, offrendo all’utente una riproduzione controllata senza la necessità di plugin esterni.

Elemento <audio>

L’elemento <audio> serve a inserire contenuti audio come file musicali, podcast o effetti sonori. La sintassi base è:

1
<audio src="path_to_audio_file.mp3"></audio>

Per una maggiore compatibilità con diversi browser, si possono specificare più formati di file audio all’interno del tag <audio> usando <source>:

1
2
3
4
5
<audio controls>
  <source src="audio_file.mp3" type="audio/mpeg">
  <source src="audio_file.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

In questo esempio, il browser tenterà di riprodurre il file in formato .mp3. Se non è supportato, proverà con .ogg. La riga finale è un testo alternativo che appare nei browser che non supportano l’elemento.

Elemento <video>

L’elemento <video> permette di incorporare contenuti video. Funziona in modo simile a <audio>, ma per file video. La sintassi di base è:

1
<video src="path_to_video_file.mp4" width="640" height="360"></video>

Come con <audio>, è possibile specificare più formati video per garantire compatibilità:

1
2
3
4
5
<video width="640" height="360" controls>
  <source src="video_file.mp4" type="video/mp4">
  <source src="video_file.webm" type="video/webm">
  Your browser does not support the video element.
</video>

Attributi per gestire il comportamento dei media

Gli elementi <audio> e <video> supportano una serie di attributi che controllano la riproduzione e il comportamento dei media.

1. controls: mostra i controlli per la riproduzione. Questi includono pulsanti per play/pausa, regolazione del volume e, nel caso di <video>, una barra di avanzamento e un pulsante di full screen.

   1
   2
   <audio src="audio_file.mp3" controls></audio>
   <video src="video_file.mp4" controls></video>
   

2. autoplay: fa partire automaticamente la riproduzione del contenuto multimediale non appena la pagina viene caricata. Attenzione: molti browser bloccano l’autoplay per impostazione predefinita, a meno che l’elemento non sia anche silenziato (muted).

   1
   2
   <audio src="audio_file.mp3" autoplay></audio>
   <video src="video_file.mp4" autoplay></video>
   

3. loop: riproduce il contenuto in loop continuo, ripartendo da capo una volta che è terminato.

   1
   2
   <audio src="audio_file.mp3" loop></audio>
   <video src="video_file.mp4" loop></video>
   

4. muted: avvia il contenuto multimediale con l’audio disattivato, utile in combinazione con autoplay per superare le restrizioni dei browser sull’avvio automatico.

   1
   2
   <audio src="audio_file.mp3" autoplay muted></audio>
   <video src="video_file.mp4" autoplay muted></video>
   

Esempio completo

Ecco un esempio che utilizza un elemento <audio> e un elemento <video> con vari attributi:

1
2
3
4
5
6
7
8
9
10
11
12
13
<h2>Audio Example</h2>
<audio controls autoplay loop muted>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

<h2>Video Example</h2>
<video width="640" height="360" controls autoplay loop muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video element.
</video>

Compatibilità dei formati

Non tutti i formati audio e video sono supportati da tutti i browser. Ecco una guida base ai formati generalmente accettati:

• Audio: MP3 (audio/mpeg), AAC (audio/aac), OGG (audio/ogg)
• Video: MP4 (video/mp4 con codec H.264), WebM (video/webm con codec VP8/VP9), OGG (video/ogg con codec Theora)

Scegliere più formati garantisce compatibilità su diverse piattaforme e dispositivi.

Conclusioni

Gli elementi <audio> e <video> offrono un modo efficace per integrare media nelle pagine HTML. Utilizzando gli attributi controls, autoplay, loop, e muted, puoi definire con precisione il comportamento di riproduzione, creando un’esperienza utente più interattiva e personalizzata.

• [Capitolo 10]/incorporazione-di-altri-contenuti/)