Con l'introduzione dello standard HTML5 per le pagine web, è possibile inserire in modo nativo audio e video nelle pagine web.
L'inserimento di contenuti multimediali è possibile utilizzando i nuovi tag di nome
audio e
video.
I 2 tag sono molto simili nell'utilizzo, ma differiscono per il fatto che il tag
audio ha il compito di riprodurre un contenuto audio, mentre il tag
video ha il compito di riprodurre video.
Al contrario di quanto si possa pensare, anche il tag audio presenta un'interfaccia, perchè entrambi i tag possono avere la barra di controllo, per agire sul contenuto in ascolto o in visualizzazione.
Questi tag devono essere utilizzati all'interno della pagina, e rientrano nel DOM della stessa, e possono perciò interagire con gli altri elementi presenti.
Vediamo un semplice esempio pratico che dimostra quanto sia intuitivo l'utilizzo di questi tag:
<!DOCTYPE html>
<html>
<head>
<title>Prova tag Video e Audio HTML5</title>
<body>
<h1>Video</h1>
<video src="video.mp4" controls>
</video>
<h1>Audio</h1>
<audio src="audio.mp3" controls />
</body>
</html>
Con l'attributo
src indichiamo con un URI il riferimento al contenuto multimediale da riprodurre.
L'attributo
controls permette di visualizzare i controlli standard che il browser offre per la gestione dei controlli
play,
pause,
seek e
volume.
Se nel tag
audio non viene specificato l'attributo
controls, si avrà un avvio automatico della traccia audio, mentre per il tag video la barra di controllo è visibile comunque passando il mouse sul video visualizzato.
E' possibile utilizzare l'attributo
autoplay per avviare automaticamente il contenuto al caricamento della pagina, e l'attributo
loop per ripetere all'infinito il contenuto, comando molto utile per creare un suono di sottofondo alla pagina.
