Sommario
Nel HTML5 gli elementi video e audio hanno molti fattori in comune, quindi l'oggetto HTMLMediaElement definisce le caratteristiche di base di ciascuno nel SOLE.Gli elementi audio sono rappresentati dall'oggetto HTMLAudioElement, questo oggetto non rappresenta alcun aumento delle funzionalità del HTMLMediaElement, dall'altra parte abbiamo l'oggetto HTMLVideoElemento che rappresentano gli elementi video e l'opposto dell'oggetto HTMLAudioElement questo se suppone alcune caratteristiche aggiuntive sul HTMLMediaElement.
L'elemento audio
L'elemento Audio ci consente di incorporare contenuti audio all'interno dei nostri documenti HTML, è una novità in HTML5 e può contenere i seguenti attributi: autoplay, precarico, controlli, loop, muto, src.
Vediamo un esempio di codice su come includere un elemento audio nei nostri documenti:
Esempio di contenuto audio non può essere riprodotto
Notiamo che abbiamo un'etichetta, dove definiamo l'attributo controlli in modo che possiamo avere i pulsanti che ci permettono di manipolare la riproduzione del file, con src indichiamo il percorso del file audio e infine riproduzione automatica, essere presente indica che il file deve essere riprodotto quando il documento viene caricato.
Come possiamo vedere, è qualcosa di abbastanza semplice da gestire, vediamo nell'immagine seguente come apparirebbe nel nostro browser:
Come avevamo accennato all'inizio, con l'oggetto HTMLMediaElement abbiamo raggruppato le caratteristiche audio e video comuni e che nel caso del video alcune caratteristiche aggiuntive sono state aumentate.
Le informazioni che possiamo ottenere con questo oggetto sono le seguenti:
- riproduzione automatica Ci dice se la riproduzione automatica del file è abilitata o meno.
- canPlayType() ci dice se il browser è in grado di riprodurre il file indicato.
- correnteSrc consente di conoscere l'origine corrente del file.
- controlli ci permette di conoscere o stabilire la presenza o meno dei controlli di riproduzione sul file.
- default Muto indica o imposta se il file deve iniziare con il volume completamente silenzioso.
- ciclo continuo indica o imposta se il file deve essere sottoposto a loop.
- disattivato abbassare il volume del file
- precarico indica o imposta il file da caricare prima della riproduzione al caricamento della pagina.
- src indica o imposta il percorso del file multimediale.
- volume imposta o indica il volume della riproduzione del file.
- altezza indica o imposta l'altezza.
- manifesto indica o imposta il valore dell'attributo poster con cui possiamo posizionare un'immagine di copertina per il video
- videoaltezza indica o imposta l'altezza del video.
- larghezza video indica o imposta la larghezza del video
- larghezza indica o imposta la larghezza.
Esempio Il video non può essere visualizzato
| Proprietà | Valore |
|---|
Per finire questo tutorial, vediamo cosa ci mostra il browser con questo codice:
INGRANDIRE
