Links | Media Player |
---|---|
Script:
$(function() {
$('a.media').click(function() {
// get media options from the markup using metadata plugin
var opts = $(this).data();
opts.src = this.href;
setTimeout(function() { playMedia(opts); }, 50);
return false;
});
});
function playMedia(opts) {
// stop the current media
$('object,embed', '#player').each(function() {
try { this.Stop(); } catch(e) {} // quicktime
try { this.controls.stop(); } catch(e) {} // windows media player
$(this).hide().remove();
});
// start the new media using opts arg
$('#player').empty().media(opts);
}
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="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:650, height:500, caption: false}" href="flash/line.swf" id="lr">Line Rider!</a>