Jquery media plugin per inserire contenuti multimediali video nelle pagine web

Jquery media plugin per inserire contenuti multimediali nelle pagine web

Domenica, Aprile 20, 2008 10:47 scritto da neryo

Postato in Ajax, Framework, Javascript, Jquery, Web 2.0

Jquery media plugin per inserire contenuti multimediali nelle pagine web

Jquery é una libreria javascript clientside veloce e concisa, tra l’altro molto famosa ed utilizzata, che permette di gestire eventi, integrare animazioni, inserire iterazioni di tipo ajax alle pagine web. Questo framework javascript e’ stata pensato appunto per cambiare e facilitare il modo di scrivere codice javascript, semplificando e potenziando le nostre applicazioni web, arricchendole di maggiore usabilitá e interattivitá. In questo post non voglio di certo ripetere nozioni scontate che si trovano ovunque sul web, ma vorrei piú che altro introdurre l’uso di alcuni plugin jquery che utilizzo nelle mie realizzazioni che sono a mio parere molto utili.

Uno di questi é il jQuery Media Plugin che supporta la conversione di un semplice e conciso tag in un un markup per un contenuto multimediale. Puo’ essere utilizzato per integrare facilmente in una pagina web media come Flash, Quicktime, Wndows Media Player, Real Player, MP3, Silverlight, PDF e tanti altri. In sostanza questo plugin converte l’elemento html, solitamente il tag con una classe css assegnata, in un contenente tag come object o iframe necessari per rendere all’utente il contenuto multimediale.

Questo media plugin jquery puo’ essere utilizzato in tutte quelle situazioni in cui si vuole rendere veloce l’inserimento di questi contenuti, e dotare anche gli utenti inesperti di un modo semplice per aggiornare i contenuti multimediali dei siti web, inserendo semplicemente dei link.

Vediamo che includendo le librerie necessarie del jquery e del media plugin:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.media.js" type="text/javascript"></script>

e aggiungendo semplicemente questo codice che assegna al tag con la classe css .media il media plugin:

<script type="text/javascript"></script>

possiamo ottenere questo tipo di risultato visibile nella demo:

<a class="media" href="sample.mov">My Quicktime Movie</a>
<a class="media" href="sample.swf">My Flash Movie</a>
<a class="media" href="sample.wma">My Audio File</a>

questi link verranno tradotti automaticamente in questo codice:

<div class="media">
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="sample.mov">
<embed src="sample.mov"
pluginspage="http://www.apple.com/quicktime/download/"></embed>
</param></object>
<div>My Quicktime Movie</div>
</div>
<div class="media">
<object codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
type="application/x-oleobject">
<param name="src" value="sample.swf">
<embed src="sample.swf"
type="application/x-shockwave-flash"
pluginspage="http://www.apple.com/quicktime/download/"></embed>
</param></object>
<div>My Flash Movie</div>
</div>
<div class="media">
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject">
<param name="url" value="sample.wma">
<embed src="sample.wma"
type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</param></object>
<div>My Audio File</div>
</div>

E’ possibile inoltre passare paramentri e specificare alcune opzioni al nostro media plugin integrando un altro codice jquery chiamato metadata plugin scaricabile da qui, ovviamente anch’ esso dovrá essere incluso nel nostro codice della pagina insieme agli altri jquery:

<script src="jquery.js" type="text/javascript"><!–mce:3–></script>
<script src="jquery.metadata.js" type="text/javascript"><!–mce:4–></script>
<script src="jquery.media.js" type="text/javascript"><!–mce:5–></script>

Come possiamo vedere con questo jquery metadata plugin possiamo specificare ulteriori opzioni al media plugin e quindi rendere piú configurabili in nostri contenuti.

<a class="media {width: 400, height: 300, autoplay: true}" href="sample.mov">My Quicktime Movie</a>
<a class="media {width: 400, height: 30, autoplay: true}" href="sample.wma">My Audio File</a>

Chiaramente questa é sola una intruduzione all’utilizzo, per avere maggiori dettagli fate riferimento al sito ufficiale.

Riferimenti:
http://www.malsup.com/jquery/media/