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:

Schermata 2014-06-24 alle 15.52.12

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, pulitoaffidabile (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à:

SCHERMATA2

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

Tag: ,

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

3 commenti

Trackback e pingback

  1. Guida HTML5: il Canvas – Parte 3 | Your Inspiration Web
    […] 10) Guida HTML5:i tag audio e video – parte 1 11) Guida HTML5:i tag audio e video – parte…