Embed Video/Audio/Flash/PDF/sIFR/Html using JQuery Media plugin

by wizbay 11. September 2010 18:52

I found a good jquery plugin to embed media files.

Sample Usage - Video / Flash

Script:

$('a.media').media();

Markup:

<script type="text/javascript" src="jquery.metadata.js"></script> 
<script type="text/javascript" src="http://github.com/malsup/media/raw/master/jquery.media.js?v0.92"></script> 
 
... 
 
<a class="media {width:480, height:280}" href="http://malsup.github.com/video/simpsons.mov">MOV File (video)</a> 
<a class="media {width:250, height:250}" href="flash/curtain.flv">FLV File</a> 
<a class="media {width:250, height:250}" href="mediaplayer.swf?file=flash/curtain.flv">SWF with FLV (mediaplayer.swf?file=curtain.flv)</a> 
<a class="media {width:250, height:200}" href="flash/snail.swf">SWF File</a> 
<a class="media {width:450, height:380, type:'swf'}" href="http://youtube.com/v/TyvN59L4hJU">Youtube Video (SWF)</a> 
<a class="media {width:480, height:425}" href="http://malsup.github.com/video/ski.wmv">WMV File</a> 
<a class="media {width:300, height:300}" href="http://malsup.github.com/video/clear.avi">AVI File</a> 
<a class="media {width:250, height:150}" href="http://malsup.github.com/video/pulsar.mpg">MPG File</a> 
<a class="media {width:250, height:180}" href="http://malsup.github.com/video/tube.3g2">3G2 File (cell phone video)</a> 
<a class="media {width:400, height:250}" href="http://malsup.github.com/video/realvideo.ram">RAM File</a> 
<a class="media {width:650, height:500, caption: false}" href="flash/line.swf" id="lr">Line Rider!</a> 
Sample Usage - Audio
Script:
$('a.media').media( { width: 300, height: 20 } );

Markup:

<script type="text/javascript" src="jquery.metadata.js"></script> 
<script type="text/javascript" src="http://github.com/malsup/media/raw/master/jquery.media.js?v0.92"></script> 
 
... 
 
<a class="media"              href="audio/sample.au">AU File</a> 
<a class="media"              href="audio/sample.aac">AAC File</a> 
<a class="media"              href="audio/sample.aif">AIF File</a> 
<a class="media"              href="audio/sample.gsm">GSM File</a> 
<a class="media"              href="audio/velvet.mid">MIDI File</a> 
<a class="media"              href="audio/sample.mp3">MP3 File</a> 
<a class="media {height:80}"  href="audio/sample.rm">RM File</a> 
<a class="media"              href="audio/sample.wav">WAV</a> 
<a class="media {height:45}"  href="audio/sample.wma">WMA File</a>
 

Sample Usage - PDF / HTML

Script:

$('a.media').media({width:500, height:400});

Markup:

<script type="text/javascript" src="http://github.com/malsup/media/raw/master/jquery.media.js?v0.92"></script> 
<script type="text/javascript" src="jquery.metadata.js"></script> 
 
... 
 
<a class="media" href="guice.pdf">PDF File</a> 
<a class="media {type: 'html'}" href="../">HTML File</a> 

Visit http://jquery.malsup.com/media/#overview for more detail.

Download plugin script: jquery.media.js (15.08 kb)

Tags: , , , , , , ,

Jquery

Comments are closed