Guida HTML5 : i player video
Benvenuto a un nuovo appuntamento con la guida HTML5! Nelle precedenti lezioni abbiamo esaustivamente parlato dei tag <audio> e <video>; oggi approfondiremo l’argomento creando un player in JavaScript capace di interagire con il tag <video>! Sembra interessante, no? E allora iniziamo subito!
Player personalizzati
Ogni player che si rispetti necessita di almeno tre pulsanti in grado di gestire la riproduzione: play, pausa e stop. Cominciamo ad inserirli nella nostra pagina:
<button onClick="play()">play</button> <button onClick="pause()">pause</button> <button onClick="stop()">stop</button>
Questi pulsanti andranno ovviamente collegati al relativo codice JavaScript che agirà sul nostro tag <video>:
function play(){ video.play(); } function pause(){ video.pause(); } function stop(){ video.pause(); video.currentTime = 0; }
Come avrai potuto notare la funzione stop non richiama un metodo propriamente chiamato stop, ma bensì impone la pausa per poi settare il progresso della riproduzione a 0 tramite il metodo currentTime.
A questo punto proviamo ad aggiungere qualche elemento più interessante come una barra che indichi la durata del video. Quale migliore occasione per sfoggiare l’utilizzo del tag <progress> conosciuto nelle precedenti lezioni?
L’HTML quindi diverrà:
<video height="480" width="640" id="video" ontimeupdate="progressUpdate()"> <source src="video/wiiu_upset.mp4" type="video/mp4"> <source src="video/wiiu_upset.ogv" type="video/ogg"> </video><br> <button onClick="play()">play</button> <button onClick="pause()">pause</button> <button onClick="stop()">stop</button> <progress id="durata" max="100" value='0'></progress>
mentre il relativo JavaScript risulterà:
function progressUpdate() { var pBar = document.getElementById('durata'); video.addEventListener('timeupdate', function() { var percent = Math.floor((100 / video.duration) * video.currentTime); pBar.value = percent; }, false); }
Volendo potremmo aggiungere tre comandi per gestire la velocità di riproduzione. In HTML il codice sarà simile al precedente:
<button onClick="slow();">rallenta</button> <button onClick="normal();">normale</button> <button onClick="fast();">velocizza</button>
Mentre in JavaScript scriveremo:
function slow(){ video.play(); video.playbackRate = 0.5; } function normal(){ video.play(); video.playbackRate = 1; } function fast(){ video.play(); video.playbackRate = 2; }
Il risultato finale sarà simile al seguente:
Bruttino eh…? Rimediamo subito!
Player esistenti
Diciamo la verità, il nostro player personalizzato non è il massimo dell’estetica e della tecnica! In molti casi potrebbe essere complesso sviluppare funzioni quale gestione di sottotitoli o di playlist, quindi, ci conviene far riferimento a player già realizzati.
Tra i migliori da prendere in considerazione sicuramente troviamo videoJS e jPlayer, entrambi gratuiti.
I vantaggi di utilizzare player come quelli appena citati sono numerosi:
-
utilizzare codice ampiamente testato, pulito e affidabile (basti pensare che vengono adoperati in siti prestigiosi come quello della bbc, di aljazeera o di vine);
-
avere accesso a funzionalità altrimenti complesse da sviluppare manualmente, tra cui playlist, sottotitoli, skins personalizzabili, flash fallback, etc.;
-
disporre di una documentazione ufficiale e di forum di supporto sempre vivaci e frequentati;
Proviamo ad essere più precisi. Vi mostro come può essere semplice implementare uno di questi player, nello specifico videoJS, nella sua versione standard.
Il primo passo da compiere è includere i file CSS e JavaScript. Abbiamo due opzioni per far ciò: la prima prevede di far riferimento a file CDN
<link href="//vjs.zencdn.net/4.6/video-js.css" rel="stylesheet"> <script src="//vjs.zencdn.net/4.6/video.js"></script>
la seconda, invece, di linkare a risorse locali. Per esempio:
<link href="videojs/video-js.css" rel="stylesheet"> <script src="videojs/video.js"></script> <script> videojs.options.flash.swf = "videojs/video-js.swf" </script>
Aggiungiamo adesso il tag <video> al nostro codice:
<video id="video_prova" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="vide/poster.jpg" data-setup='{"example_option":true}'> </video>
Se hai seguito le precedenti lezioni riuscirai facilmente ad interpretare gli attributi controls, preload e poster. All’interno del tag video aggiungeremo il file vero e proprio in tre differenti formati (webm, ogg e mp4) per coprire tutti i dispositivi:
<source src="video/wiiu_upset.mp4” type='video/mp4' /> <source src="video/wiiu_upset.webm" type='video/webm' /> <source src="video/wiiu_upset.ogv" type='video/ogg' />
L’ultimo passo, facoltativo ma molto utile ai fini della compatibilità, consiste nell’aggiungere un messaggio.
La procedura che abbiamo appena visto è molto simile anche per altre tipologie di player. È ulteriormente incoraggiante sapere che generalmente la documentazione per l’implementazione è molto chiara.
L’aspetto finale sarà:
Conclusione
Nel corso di questo articolo abbiamo imparato come creare un elementare player video o, in alternativa, come utilizzare plugins già pronti. Nel corso del prossimo articolo ci tufferemo in una nuova, appassionante, sezione di questa guida: il canvas. Non mancate!
Prima di lasciarci troviamo spazio per alcune riflessioni. Preferisci impiegare il tuo tempo cercando di creare un player su misura o utilizzare le alternative gratuite che puoi trovare sul web? Utilizzi altri player differenti da quelli illustrati? Se sì, perché li preferisci?
Come al solito, prima di darti appuntamento alla prossima lezione, ti ricordo che puoi scaricare il codice completo da questo link.
GUIDA HTML5: GLI ARTICOLI
1) Guida HTML5:Introduzione
2) Guida HTML5: la prima pagina
3) Guida HTML5: la struttura
4) Guida HTML5: Immagini e outlines
5) Guida HTML5: nuovi elementi semantici
6) Guida HTML5: i form – Parte 1
7) Guida HTML5: i form – Parte 2
8) Guida HTML5: i form – Parte 3
9) Guida HTML5: i form – Parte 4
10) Guida HTML5:i tag audio e video – parte 1
11) Guida HTML5:i tag audio e video – parte 2
12) Guida HTML5: I player video
13) HTML5: Il Canvas – Parte 1
14) Guida HTML5: Il Canvas – Parte 2
15) HTML5: Il Canvas – Parte 3
16) HTML5: Il Canvas – Parte 4
17) HTML5: Web storage
18) Web worker
3 commenti
Trackback e pingback
[…] 10) Guida HTML5:i tag audio e video – parte 1 11) Guida HTML5:i tag audio e video – parte…