Come installare un player su Blogger per riprodurre una playlist di video in HTML5.

Come installare in Blogger un player video che riproduca una playlist di filmati caricati online da noi oppure già presenti ma di cui se ne conosca il link diretto.

Abbiamo appena visto come sia possibile installare in Blogger un player HTML5 che riproduca file audio di una playlist in formato MP3. Bisogna naturalmente aver caricato i file in un hosting che li supporti e che ci fornisca il loro link diretto oppure alternativamente avere gli hotlink di file già presenti in rete.

Seguendo la stessa falsariga vediamo come si possa creare sempre in HTML5 un player video che riproduca filmati in MP4 precedentemente caricati online. La installazione di un semplice player in HTML5 per un solo video è piuttosto semplice visto che basta incollare questo codice

<video width="320" height="240" controls>
<source src="URL del video mp4" type="video/mp4">
</video>

in un widget HTML/Javascript dopo aver personalizzato i parametri in rosso. Questo player sarà visibile con tutti i browser più moderni compreso Internet Explorer. Per mostrare una playlist di video si può naturalmente scegliere di postarli su Youtube, creare una playlist e ottenerne il codice da incorporare ma ci potrebbero essere delle ragioni per cui non si possa seguire questa procedura e scegliere di usare un nostro player. Dovremo allora innanzitutto caricare i file MP4 sul web.

CARICARE VIDEO SU GOOGLE DRIVE

Come hosting di filmati si può usare Google Drive con la sua nuova funzionalità di offrire il link diretto per tutti i file che vi sono caricati in una cartella condivisa pubblicamente. Per l’hotlink basta mettere la flag al file appena caricato, andare a destra su Dettagli quindi copiare il link che si trova subito sotto la scritta Hosting. Tale URL finirà con l’estensione del file



Per maggiore chiarezza ho postato sul mio canale Youtube un video esplicativo della procedura

Vediamo adesso come installare il player MP4

MODIFICARE IL MODELLO

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </body> con Ctrl+F. Subito sopra si incolla questo codice

<!-- Player Video HTML5 Inizio -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/><script>//<![CDATA[
var video;var vplaylist;var vtracks;var vcurrent;initvideo();function initvideo(){vcurrent=0;video=$('video');vplaylist=$('#vplaylist');vtracks=vplaylist.find('li a');vlen=vtracks.length-1;video[0].volume=1;vplaylist.find('a').click(function(e){e.preventDefault();link=$(this);vcurrent=link.parent().index();runvideo(link,video[0])});video[0].addEventListener('ended',function(e){vcurrent++;if(vcurrent>vlen){vcurrent=0;link=vplaylist.find('a')[0]}else{link=vplaylist.find('a')[vcurrent]}runvideo($(link),video[0])})}function runvideo(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');video[0].load();video[0].play()}
//]]>
</script>
<!-- Player Video HTML5 Fine -->

Successivamente si cerca la riga ]]></b:skin> e, subito sopra, si incolla quest’altro codice

/* Aspetto Player Video */
#vplaylist, #vplayer {
width: 400px; /* Larghezza del contenitore */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#vplayer {
padding: 10px 20px;
background: #000; /* Colore di sfondo del primo contenitore */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
video {
width:400px; /* Larghezza del player */
padding-top: 10px;
margin:0 auto;
display: inline-block
}
#vplaylist {
margin: 0 auto 20px auto;
display: block;
background: #424242; /* Colore di sfondo del secondo contenitore */
border-top: 5px solid #9F111B;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
font-size: 12px;
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#vplaylist li, #vplaylist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#vplaylist li a:hover{
background: #9F111B; /* Colore di sfondo al passaggio del mouse */
text-decoration: none;
}
#vplaylist .active a {
color: #B11623; /* Colore del video attivo */
font-style: italic;
text-decoration: none;
}
#vplaylist .active a:before {
/* Icona prima del video attivo */
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#vplaylist .active a:hover {
color: #222; /* Colore del video attivo al passaggio del mouse */
}

Finalmente si salva il modello. I commenti di colore verde indicano i parametri in rosso in quale aspetto del layout del player incidano. Le righe evidenziate di giallo sono servono per installare la libreria JQuery e possono essere tralasciate se fosse già presente nel template. Adesso dobbiamo installare il riproduttore video vero e proprio con la playlist di filmati appositamente caricati online. Si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezione del sito,  si incolla questo ultimo codice

<div id='vplayer'>
<video controls='' height='224' width='400' id='video' preload='auto' tabindex='0' type='video/mp4'>
<source src='URL del primo video' type='video/mp4'/>
Il tuo browser non supporta HTML5.</source></video>
</div>
<ul id='vplaylist'>
<li class='active'><a href='URL del primo video'>Nome del primo video</a></li>
<li><a href='URL del 2° video'>Nome del 2° video</a></li>
<li><a href='URL del 3° video'>Nome del 3° video</a></li>
<li><a href='URL del 4° video'>Nome del 4° video</a></li>
<li><a href='URL del 5° video'>Nome del 5° video</a></li>
</ul>

Si salva e si posiziona a piacere. Come vedete l’URL del primo filmato va inserito due volte mentre le dimensioni del player sono personalizzabili i n modo coerente con quelle del codice precedente. Se si volessero inserire più di 5 video basta incollare prima di </ul> delle nuove righe del tipo

<li><a href='URL del 6° video'>Nome del 6° video</a></li>

Di default la riproduzione dei filmati sarà senza soluzione di continuità ma si potrà sempre interrompere e per iniziare ci vorrà un click del lettore che potrà anche navigare tra i vari video.

Fonti | Last Rose e Ciudad Blogger -