La realizzazione di un sito web oggi è subordinata alla gestione di contenuti audio e video: possono essere gestite tracce audio, come ad esempio podcast o musica, oppure post con video che devono essere riprodotti. Per gestire questi elementi multimediali possiamo usare alcune librerie già presenti in Internet.

Player audio

Per il player audio vediamo, in questo articolo, una libreria molto semplice che ho usato in Javascript chiamata audio.js e può essere scaricata da qui. E’ una libreria che permette di avere un semplice player orizzontale personalizzabile che ci permette di ascoltare una traccia, metterla in pausa e ricercare nel tempo un punto del brano.

Si usa importando la libreria audio.min.js e mettendo nella stessa directory anche i files audio.js, player-graphics.gif e audiojs.swf. Una volta scaricati questi file possiamo creare la struttura del player html e inserire la nostra traccia come sorgente nel tag in questo modo:

<audio src="/mp3/juicy.mp3" preload="auto">

Fatto questo possiamo chiamare il codice di inizializzazione del player in Javascript in questo modo:

<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>

Player video

Per quanto riguarda riprodurre i video su un sito web si può fare in vari modi:

• Caricare il video su Youtube o Vimeo ed esportare il codice embedded;
• Caricare il video sul nostro server e riprodurlo tramite il tag html5 <video> che sfrutta il player del browser;
• Caricare il video sul nostro server e installare un video player Javascript.

Per il tag html <video> si può impostare una struttra del genere:

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>

In questo modo il browser riconoscerà che è una risorsa video e caricherà il player incorporato all’interno della pagina.

Se volete installare invece un player video in Javascript, vi consiglio Flowplayer che può essere scaricato da qui. Una volta importata la libreria flowplayer.min.js possiamo creare il player con questa struttura:

<div class="flowplayer">
      <video>
         <source type="video/webm" src="my-video2.webm">
         <source type="video/mp4" src="my-video2.mp4">
      </video>
</div>

In questo codice verrà caricato il player e potrà essere customizzato con delle regole CSS in modo da personalizzarlo per il nostro sito web.