Audio e video - HTML5 con CSS e JavaScript - page 194

msg = "Pausa";
document.getElementById("play").innerHTML = msg;
}
Nell'esempio precedente abbiamo ridefinito, inoltre, la funzione videoStateChanged ,
per far sì che, in base alla proprietà paused , possiamo andare ad alterare il testo del pul-
sante: se è in corso la riproduzione, scriviamo “Pausa” mentre, se la riproduzione è ferma,
scriviamo “Play”.
Un altro aspetto che va gestito, solitamente, è la posizione e la durata della riproduzione
corrente. Il nostro obiettivo è che il tag span con ID time contenga i secondi della posizio-
ne corrente nella timeline di riproduzione e i secondi totali del contenuto. Per raggiungere
questo scopo, l'evento ideale è timeupdate , perché viene scatenato molte volte durante
la riproduzione, dandoci la possibilità di aggiornare il testo da visualizzare. Nell'esempio
9.11 possiamo vedere come, con poche righe, diventa possibile scrivere la posizione cor-
rente.
Esempio 9.11
video.addEventListener("timeupdate", updateTime, false);
function updateTime(e) {
var msg = e.target.currentTime.toFixed(1)) +
" | " + e.target.duration.toFixed(1) + " s";
document.getElementById('time').innerHTML = msg;
}
Le proprietà currentTime e duration restituiscono, rispettivamente, la posizione
corrente e la durata totale del contenuto, in secondi. Poiché non esiste una regola su quante
volte l'evento dovrebbe essere scatenato e poiché ciò avviene anche più di una volta al se-
condo, ricorriamo alla funzione toFixed per arrotondare l'informazione al centesimo di
secondo. Tra le altre proprietà che possono essere d'aiuto vale la pena citare:
seekable : indica se il contenitore supporta lo spostamento della riproduzione,
agendo su currentTime ;
seeking : indica se è in corso lo spostamento del punto di riproduzione;