jquery.mb.mediaEmbedder Matteo Bicocchi's Blog

YoutubeやUstream等の動画埋め込みが超簡単になるjQueryプラグイン「jquery.mb.mediaEmbedder」が公開されています。
<div>要素の中にWIKI記法っぽく記述するだけで動画の埋込みが可能です。vimeo、Ustream、Youtube、Livestream、Flickrの他、mp3のようなオーディオファイルにも対応しています。



サンプルコードは以下で、動画のembedコードを取り出すことなく、動画閲覧用のURLを指定するだけで埋込みが完了します。
投稿されたURL等をプレビューしたい場合に、いちいちYoutubeのサイトを叩いたりしてembedコードを取得する必要がありません。

<div id="example">
<h1>Vimeo</h1>
[vimeo=http://www.vimeo.com/109467]<br><br>
<h1>Ustream</h1>
[ustream=http://www.ustream.tv/recorded/2691132]<br><br>
<h1>Youtube</h1>
[youtube=http://www.youtube.com/watch?v=PLs5HN7FS0w]<br><br>
<h1>audio files</h1>
[audio=http://dl.dropbox.com/u/1976976/linea_gialla.mp3]
</div>

実装は、上記のようなHTMLがある前提で、以下のコードを記述します。

<script type="text/javascript" src="inc/jquery/1.4.2.min.js"></script>
<script type="text/javascript" src="inc/jquery.mb.mediaEmbedder.js"></script>
<script type="text/javascript">
$(function(){
    $.mb_audioEmbedder.playerPath="media/player.swf" //the path to audio player 
    $.mb_videoEmbedder.defaults.width=500; //the with of players --> the height is automatically calculated 
    $('#example').mb_embedMovies() 
    $('#example').mb_mb_embedAudio({})
});
</script>

様々なメディアサイトに対応しているのはなかなか便利ではないでしょうか。