前の記事 ≪：jQuery用データビジュアライズ用プラグイン「jQuery Visualize Plugin」
次の記事 ≫：Photoshop向けの紙のブラシ集

Youtubeの動画URLやvidからサムネイルを簡単に取得できるjQueryプラグイン「jYouTube」

2009年07月09日-はてなブックマーク

スポンサード リンク
JQuery HowTo: jYouTube - jQuery YouTube Thumbnail plugin. Gets any YouTube video’s image/thumbnail

Youtubeの動画URLやvidからサムネイルを簡単に取得できるjQueryプラグイン「jYouTube」。
Youtube動画にリンクする際に、サムネイルがあったほうが分かりやすいですが、
「http://www.youtube.com/watch?v=1MUILAkkumg」 や、「1MUILAkkumg」といったパラメータを渡すことで簡単にサムネイルURLに変換できるプラグインがあるようです。



以下がサンプルコード。

<html>
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jyoutube.js"></script>
<body>
<script type="text/javascript">
<!--
$(function(){
    var url = $.jYoutube('1MUILAkkumg', 'small'); // small 以外に big も指定可能
    $('#thumb').attr('src', url);
});
-->
</script>
<img src="" id="thumb">
</body>
</html>

URLを取得して、手動で attr にて属性設定をしていますが、<a href="http://youtube.com/watch?v=vid">ビデオ</a> があったとして、<a href="http://youtube.com/watch?v=vid">ビデオ<br><img src="サムネイル"></a> のように自動で変換するような機能を拡張して実装してみても面白そうです。
jQueryのURLがあったら自動でムービー埋め込みにしてみたり、自動再生やループ再生オプションも付けたりする機能を追加してみても面白いかもしれません。

関連エントリ
関連の記事検索：jQuery, YouTube, JavaScript, 動画, サムネイル
スポンサード リンク

By.KJ : 2009年07月09日 10:05 ブックマークに追加する livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)