HTML and CSS Reference
In-Depth Information
Per creare un player, ad ogni modo, gli aspetti da controllare sono molteplici: in questo
capitolo cerchiamo di affrontare quelli principali, così da raggiungere una buona persona-
lizzazione.
L'obiettivo che vogliamo raggiungere è di fornire un pulsante di play, unito a
un'etichetta che mostri la posizione corrente della riproduzione o gli eventuali stati di ca-
ricamento o errore. Cominciamo, quindi, con il definire il video, il pulsante e l'etichetta,
come mostrato
nell'esempio 9.6
.
Esempio 9.6
<video src="test.mp4" id="video" />
<div>
<a href="#" id="play"></a> <span id="time" />
</div>
Il markup è essenziale, ma sufficiente per affrontare le tematiche principali. Abbiamo ag-
giunto un pulsante per far partire la riproduzione e un tag
span
per visualizzare la posizio-
ne del video.
Il primo passo da effettuare consiste nel gestire gli stati e gli eventi relativi al contenuto
multimediale, così da notificare all'utente se stiamo caricando il file o se ci sono problemi
nella riproduzione.
Sull'interfaccia associata ai tag
audio
e
video
ci sono due proprietà fondamentali,
di nome
networkState
e
readyState
, che ci danno, rispettivamente, le informazioni
sullo stato di caricamento del file e sullo stato inerente al suo contenuto e alla quantità di
informazioni che sono state caricate.
Definiamo, quindi, una funzione di inizializzazione di nome
initVideo
, che chia-
miamo a caricamento del DOM avvenuto. In questa funzione, inoltre, intercettiamo con la
funzione
addEventListener
di JavaScript gli eventi che influenzano le due proprietà
prima menzionate, come
nell'esempio 9.7
.
Esempio 9.7
function initVideo() {
var video = document.getElementById('video');
// Eventi relativi alla proprietà networkState
