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>Con l'attributo src indichiamo con un URI il riferimento al contenuto multimediale da riprodurre.
<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>
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.
Nessun commento:
Posta un commento