Search

jQuery pluginYouTube連携

  1. jquery-tubular〔背景いっぱいにYouTube動画を再生〕
  2. jQuery Youtube Player〔YouTubeビデオ埋め込みカスタマイズ〕
  3. jquery.mb.mediaEmbedder.1.0〔Vimeo、Ustream、livestream、YouTube、mp3などのメディアファイルを簡単に埋め込み〕
  4. prettyPhoto〔リンククリックで、Vimeo、YouTube動画をポップアップ表示〕
  5. jYouTube〔YouTubeビデオのサムネイルやスクリーンショットを取得するjQueryプラグイン〕
  6. YouTubeのRSSから取得したビデオのサムネイルとリンクを出力〔jQuery使用〕
  7. YouTube Chromeless Video Player〔クロムレスプレーヤー埋め込みプラグイン〕
  8. jQuery Youtube playlist plugin〔カスタマイズ性に富んだオリジナルの再生リストが作れる〕
  9. Oembed plugin for jQuery〔写真、動画など様々なメディアをURLだけで簡単に埋め込める〕
  10. jQuery YouTube Plugin〔任意のキーワードでのYouTube動画検索結果をWebページに表示〕
  11. jQuery YouTube TubePlayer Plugin〔プレーヤーのコントロール制御と各種イベント発生時のコールバックが用意されている〕
  12. A jQuery Plugin For All Your Video Embedding Needs〔YouTubeやVimeoなどの動画をWebページに埋め込み〕
  13. YouTubin’ Plugin for jQuery〔YouTube動画のURLを指定でプレーヤーをWeb埋め込み〕
  14. Making a Custom YouTube Video Player With YouTube’s APIs〔プログレスバーと各種コントロールをカスタマイズできるクロムレスプレーヤーの埋め込み〕

jquery-tubular
背景いっぱいにYouTube動画を再生

2011/1/4

jquery-tubular

MIT
jquery.js、swfobject.js、jquery.tubular.js

YouTubeビデオをブラウザの画面いっぱいにフルサイズで表示するjQueryプラグイン。 YouTubeチャンネルの紹介とかによさげ。

YouTube JavaScript APIを使用して、動画の制御（再生、一時停止、停止、ミュートON/OFF）ができるようになっています。

動画は、SWF埋め込みjQueryプラグインの「swfobject.js」を使用して、画面フルサイズのブロック要素を生成して埋めこまれています。 この動画部分はz-indexで後方に背景としてしかれている（z-index=1）ので、z-indexを調整することで、タイトルや説明文などHTML要素を動画の上に表示することができます。

動画のアクペクト比は、jquery.tubular.js内にある変数「videoRatio」で16/9、4/3など変更できます。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/css/reset.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
        <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
        <script type="text/javascript" charset="utf-8" src="/content/lib/jquery/jquery.tubular.js"></script>
        <script type="text/javascript">
            $(function() {
                $('body').tubular('9YEEl52u8XE','wrapper');
                // f-UGhWj1xww cool sepia hd
                // 49SKbS7Xwf4 beautiful barn sepia
                
                // Play/Pause
                $('#videoPause').click(function() {
                    if ($(this).hasClass('videoPaused')) {
                        ytplayer.playVideo();
                        $(this).removeClass('videoPaused');
                    } else {
                        ytplayer.pauseVideo();
                        $(this).addClass('videoPaused');
                    }
                    return false;
                });
                
                // Mute/Unmute
                $('#videoMute').click(function() {
                    if ($(this).hasClass('videoMute')) {
                        ytplayer.mute();
                        $(this).removeClass('videoMute');
                    } else {
                        ytplayer.unMute();
                        $(this).addClass('videoMute');
                    }
                    return false;
                });
                
                // Nuke video (for slow connections -- stops loading entirely)
                $('#videoStop').click(function() {
                    ytplayer.stopVideo();
                    ytplayer.clearVideo();
                    $('#yt-container').hide();
                    return false;
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
body {
    position:relative;
    font-size:12px;
}
#main {
    position:absolute;
    top:110px; left:30px;
    -webkit-border-radius:5px;-moz-border-radius:5px;
    background:#000;
    opacity:.7;
    color:#fff;
    margin:0 auto; padding:10px;
    width:21em;
}
#main h1 {
    margin:0 0 10px 0; padding:0;
}
#main p {
    margin:5px 0;
}
#main h1 a {
    background:transparent url(/content/img/ajax/youtube.png) no-repeat 0 0;
    padding-left:20px;
    line-height:16px;
    font-weight:bold;
    font-size:16px;
}
a {
    color:#ff6699;
}
#sidebar {
    position:absolute;
    top:110px; right:30px;
    -webkit-border-radius:5px;-moz-border-radius:5px;
    background:#000;
    opacity:.7;
    color:#fff;
    margin:0 auto; padding:10px;
    width:11em;
}
        </style>
    </head>
    <body>
<!-- CODE -->
<div id="wrapper">
    <div id="main">
        <h1><a href="http://www.youtube.com/user/cocoism3">cocoism channel</a></h1>
        <p>なにかとったらアップするかもしれません。グルメと犬がほとんどだと思われますｗ</p>
        <p>Video controls: <a href="" id="videoPause">再生/一時停止</a> | <a href="" id="videoMute">ミュート</a> | <a href="" id="videoStop">停止</a></p>
    </div>
    <div id="sidebar">
        <p>参照：<a href='http://code.google.com/p/jquery-tubular/' target='_blank'>jquery-tubular</a></h4>
    </div>
</div><!-- #wrapper -->
<!-- / CODE -->
    </body>
</html>

jQuery Youtube Player
YouTubeビデオ埋め込みカスタマイズ

2011/1/4

jQuery Youtube Player

MIT
jquery.js、swfobject.js、jquery.youtube.player.js

YouTubeビデオのプレーヤー、ツールバー、再生リストなどをカスタマイズできるjQueryプラグイン。

「Multiple Playlists」のサンプルでは、再生リストの切り替えができるようになっています。 再生リストにはユーザー名、再生リストIDを指定したり、好きな動画のID＆タイトルのセットを配列で指定して独自の再生リストを作ることもできます。

動画の埋め込みには、jQueryプラグインの「swfobject.js」、ツールバーと再生リスト部分のスタイルは、jQuery UIのテーマが使われています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.youtube.player.js"></script>
        <!-- CSS -->
        <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css" />
        <link type="text/css" rel="stylesheet" href="/content/lib/jquery/youtube-player.css" />
        <style type="text/css">
            #centered {
                width:700px;
            }
            .watchvideo {
                width:430px;
                float:left;
            }
            .playlists {
                float:right;
                width:250px;
                margin:0; padding:5px;
                text-align:left;
                border:1px solid #000;
                -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
                background:#eee;
            }
        </style>
    </head>
    <body>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://badsyntax.github.com/youtube-player/' target='_blank'>jQuery Youtube Player</a> - Multiple Playlists</p>
<!-- CODE -->
        <div id="centered">
            <div class="cf">
                <div class="watchvideo">
                    <div class="youtube-player">
                        <div class="youtube-player-video">
                            <div class="youtube-player-object">
                                You need Flash player 8+ and JavaScript enabled to view this video.
                            </div>
                        </div>
                    </div>
                </div><!-- .watchvideo -->
                <div class="playlists">
                    <strong>Playlists:</strong>
                    <ol>
                        <li><a href="#playlist-1">My Favorite POPS<br>（videoID＋title指定）</a></li>
                        <li><a href="#playlist-2">My Favorite R&B<br>（videoID＋title指定）</a></li>
                        <li><a href="#playlist-3">ChrisetteMicheleVEVO<br>（ユーザー名指定）</a></li>
                        <li><a href="#playlist-4">TheXFactorUK/2010 Live Show 1<br>（再生リストID指定）</a></li>
                    </ol>
                    <div id="loading" style="margin: 4px 0;display:none;">loading...</div>
                </div><!-- .playlists -->
            </div>
        </div>
        <script type="text/javascript">
            var playlists = {
                'playlist-1': {
                    title: 'POPS',
                    videos: [
                        { id: 'bOiTaaoKca4', title: 'Josh Groban- You Raise Me Up (Live)' },
                        { id: 'YEbgBKV4_Mk', title: 'Ke$ha - TiK Tok' },
                        { id: '1OfsZyYPLoI', title: 'Lady Antebellum - Need You Now' }
                    ]
                },
                'playlist-2': {
                    title: 'R&B',
                    videos: [
                        { id: 'oBhj-Tv4WHI', title: "Usher ft. Pitbull - DJ Got Us Falling In Love Again" },
                        { id: 'my_lMpDCrI0', title: "Chrisette Michele - I'm A Star" }
                    ]
                },
                'playlist-3': {
                    user: 'ChrisetteMicheleVEVO'
                },
                'playlist-4': {
                    playlist: '87A4836EB1B0E8B7'
                }
            };
            var playerConfig =  {
                playlist: playlists['playlist-1'], // initial playlist
                onError: function(msg){
                    alert(msg);
                },
                onBeforePlaylistLoaded: function(playlist){
                    $('#loading').show();
                },
                onAfterPlaylistLoaded: function(playlist){
                    $('#loading').hide();
                }
            };
            $(function(){
                var player = $('.youtube-player').player( playerConfig );
                $('.playlists a[href*=#]').click(function(){
                    var playlist = playlists[ this.hash.replace(/^.*?, '') ];
                    player.player('loadPlaylist', playlist);
                    return false;
                });
            });
        </script>
<!-- / CODE -->
    </body>
</html>

jquery.mb.mediaEmbedder.1.0
Vimeo、Ustream、livestream、YouTube、mp3などのメディアファイルを簡単に埋め込み

2011/1/4

jquery.mb.mediaEmbedder.1.0

MIT＆GPL
jquery.js、jquery.mb.mediaEmbedder.js

Vimeo、Ustream、livestream、YouTubeなどの動画ファイルやオーディオファイル（mp3など）をWebページに埋め込めるjQueryプラグイン。 ルールに従ってHTML上にURLを記述するだけで、様々なメディアの動画を簡単に表示できます。

▼head要素内
動画の幅（px）と、動画メディアを埋め込んだ場合は「mb_embedMovies()」、音声メディアを埋め込んだ場合は「mb_embedAudio()」をそれぞれコールします。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type='text/javascript' src='/content/lib/jquery/jquery.mb.mediaEmbedder.js'></script>
<script type='text/javascript'> 
　$(function(){
　　$.mb_videoEmbedder.defaults.width=500; /* 動画の幅 */
　　$('#example').mb_embedMovies(); /* 親ボックス要素のIDを指定 */
　　$('#example').mb_embedAudio(); /* 親ボックス要素のIDを指定 */
　});
</script>

▼body要素内
埋め込みたい場所に下記のように[メディア=URL]を記述

<div id='example'> 
　[vimeo=https://player.vimeo.com/video/17621410]<br><br> 
　[youtube=https://www.youtube.com/watch?v=PLs5HN7FS0w]<br><br> 
　[flickr=http://www.flickr.com/photos/danielofredorota/3182095499/]<br><br> 
　[livestream=http://www.livestream.com/fox8news]<br><br>
　[ustream=http://www.ustream.tv/recorded/2691132]<br><br> 
　[audio=http://dl.dropbox.com/u/1976976/linea_gialla.mp3&titles=linea gialla]
</div>
設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.mb.mediaEmbedder.js"></script>
        <script type="text/javascript">
            $(function(){
                $.mb_videoEmbedder.defaults.width=500;
                $("#example").mb_embedMovies();
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
        </style>
    </head>
    <body>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-mediaembedder/' target='_blank'>jquery.mb.mediaEmbedder.1.0</a></p>
        <p>Vimeo、YouTube動画を埋めこんでみました。</p>
<!-- CODE -->
        <div id="example">
            <h2>Vimeo</h2>
            [vimeo=https://player.vimeo.com/video/17621410]<br><br>
            <h2>Youtube</h2>
            [youtube=https://www.youtube.com/watch?v=GILIk8W00s4]<br><br>
        </div>
<!-- / CODE -->
    </body>
</html>

prettyPhoto
リンククリックで、Vimeo、YouTube動画をポップアップ表示

2008/11/16

prettyPhoto

Creative Commons Attribution 2.5
[JS]jquery.js、jquery.prettyPhoto.js／[CSS]prettyPhoto.css

jQuery lightboxを継承した音声・動画ファイルをWebページに埋め込んでポップアップ表示するマルチメディア対応プラグイン。 リンククリックで、vimeo、YouTubeなどの動画ファイルをポップアップ表示して再生することができます。

▼head要素内

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' ></script>
<script type='text/javascript' src='path/to/jquery.prettyPhoto3.js'></script>
<script type='text/javascript'>
　$(function(){
　　$('a[rel^='prettyPhoto']').prettyPhoto();
　});
</script>
<!-- CSS -->
<link rel='stylesheet' type='text/css' href='path/to/css/prettyPhoto.css' />

▼body要素内

<a href='http://vimeo.com/17621410' rel='prettyPhoto'>Vimeo</a>
<a href='http://www.youtube.com/watch?v=GILIk8W00s4' rel='prettyPhoto'>YouTube</a>
設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.prettyPhoto3.js"></script>
        <script type="text/javascript">
            $(function(){
                $("a[rel^='prettyPhoto']").prettyPhoto();
            });
        </script>
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="/content/lib/jquery/prettyphoto3/css/prettyPhoto.css" />
        <style type="text/css">
            #demo p {
                line-height:16px;
            }
            #demo p a {
                text-decoration:none;
                font-weight:bold;
            }
            #demo p a img {
                vertical-align:middle;
                padding-right:5px;
            }
        </style>
    </head>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/' target='_blank'>prettyPhoto</a></p>
        <p>Vimeo、YouTube動画を埋めこんでみました。</p>
<!-- CODE -->
        <div id="demo">
            <h2>Vimeo</h2>
            <p><a href="http://vimeo.com/17621410" rel="prettyPhoto" title="New York Times Magazine - Year In Ideas by Sean Pecknold"><img src="/content/img/ajax/vimeo.png" alt="Vimeo" />ビデオを見る</a></p>
            <h2>Youtube</h2>
            <p><a href="http://www.youtube.com/watch?v=GILIk8W00s4" rel="prettyPhoto" title="布団にもぐるところ"><img src="/content/img/ajax/youtube.png" alt="YouTube" />ビデオを見る</a></p>
        </div>
<!-- / CODE -->
    </body>
</html>

jYouTube
YouTubeビデオのサムネイルやスクリーンショットを取得するjQueryプラグイン

2011/1/5

jYouTube - YOUTUBE VIDEO THUMBNAIL/SCREENSHOT GETTE

GPL
jquery.js、jyoutube.js

指定したYouTubeビデオのサムネイルを取得するjQueryプラグイン。

第1引数に「YouTubeビデオのURL」（またはビデオID）、第2引数に「サムネイルのサイズ」を指定すると、そのビデオのスクリーンショットのURLを取得することができます。 サムネイルのサイズは“small”（120x90）、“big”（480x360）を指定可能です。bigの場合は省略可能です。

プラグイン内で“small”は2フレーム目、“big”は0フレーム目のサムネイルを取得するよう指定されていますのでその箇所を変更すれば、他のフレームのサムネイルを取得できます。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jyoutube.js"></script>
        <script type="text/javascript">
            $(function(){
// 1.YouTubeビデオの動画IDを指定
$("#thumb").attr("src",$.jYoutube('8e_wXc0m97w'));
// 2.YouTubeビデオのURLを指定＋サムネイルサイズ（small）
$("#thumb_small").attr("src",$.jYoutube('http://www.youtube.com/watch?v=9YEEl52u8XE', 'small'));
// 3.YouTubeビデオのURLを指定＋サムネイルサイズ（big or null）
$("#thumb_big").attr("src",$.jYoutube('http://www.youtube.com/watch?v=9YEEl52u8XE', 'big'));
            });
        </script>
    </head>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://plugins.jquery.com/project/jyoutube' target='_blank'>jYouTube</a></p>
        <p>指定したYouTube動画のサムネイルを取得。</p>
<!-- CODE -->
        <div id="demo">
            <h2>1. YouTubeビデオの動画IDを指定（デフォルトは“big”）</h2>
            <p><img id="thumb" /></p>
            <h2>2. YouTubeビデオのURLを指定＋サムネイルサイズ（small）</h2>
            <p><img id="thumb_small" /></p>
            <h2>3. YouTubeビデオのURLを指定＋サムネイルサイズ（big or null）</h2>
            <p><img id="thumb_big" /></p>
        </div>
<!-- / CODE -->
    </body>
</html>

YouTubeのRSSから取得したビデオのサムネイルとリンクを出力
jQuery使用

2011/1/5

jquery.js

jQueryを使用して、YouTubeのRSSから取得したビデオのサムネイルとリンクを出力するサンプルです。

参照：YouTube:RSSについて

▼下記のサンプルでは「hamster+cute」で全文検索した結果から最新10件を表示してみました。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jyoutube.js"></script>
        <script type="text/javascript">
            $(function(){
                $.getJSON('http://gdata.youtube.com/feeds/base/videos?q=hamster%2Bcute&client=ytapi-youtube-search&v=2&alt=json-in-script&callback=?&max-results=10', function(data) { 
                    $.each(data.feed.entry, function(i, item) {
                        var title = item['title']['$t'];
                        var video = item['id']['$t'];
                        var video_ary = video.split("video:");
                        var vid=video_ary[video_ary.length-1];
                        var thumb="http://img.youtube.com/vi/"+vid+"/2.jpg";
                        video = video.replace('http://gdata.youtube.com/feeds/videos/','http://www.youtube.com/watch?v=');
                        $('#results').append('<li><a href="http://www.youtube.com/watch?v='+vid+'"><img src="'+thumb+'" width="60" />'+title+'</a></li>');
                    });
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            ul {
                margin:0; paddng:0;
                list-style:none;
            }
            li {
                margin:0 0 5px 0; padding:0;
                list-style:none;
            }
            li a {
                text-decoration:none;
            }
            li a:hover {
                color:blue;
            }
            li img {
                vertical-align:middle;
                border:1px solid #000;
                margin:0 10px 0 0; padding:0;
            }
        </style>
    </head>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://www.youtube.com/rssls?gl=JP&hl=ja'>YouTube:RSSについて</a></p>
        <p>YouTube動画：「hamster+cute」で全文検索した結果から最新10件を表示。</p>
<!-- CODE -->
        <ul id="results"></ul>
<!-- / CODE -->
    </body>
</html>

また、RSSフィード内には、コンテンツ情報のHTML文（テーブルレイアウト）も含まれています。 このコンテンツ情報には、サムネイル、タイトル、レーティングなどひと通り入っていますので、そのまま出力すれば下図のような表示が簡単に行えます。

▼下記のサンプルでは「hamster+cute」で全文検索した結果から最新5件のコンテンツ情報を表示しています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jyoutube.js"></script>
        <script type="text/javascript">
            $(function(){
                $.getJSON('http://gdata.youtube.com/feeds/base/videos?q=hamster%2Bcute&client=ytapi-youtube-search&v=2&alt=json-in-script&callback=?&max-results=10', function(data) { 
                    $.each(data.feed.entry, function(i, item) {
                        var title = item['title']['$t'];
                        var video = item['id']['$t'];
                        var video_ary = video.split("video:");
                        var vid=video_ary[video_ary.length-1];
                        var thumb="http://img.youtube.com/vi/"+vid+"/2.jpg";
                        video = video.replace('http://gdata.youtube.com/feeds/videos/','http://www.youtube.com/watch?v=');
                        $('#results').append('<li><a href="http://www.youtube.com/watch?v='+vid+'"><img src="'+thumb+'" width="60" />'+title+'</a></li>');
                    });
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            ul {
                margin:0; paddng:0;
                list-style:none;
            }
            li {
                margin:0 0 5px 0; padding:0;
                list-style:none;
            }
            li a {
                text-decoration:none;
            }
            li a:hover {
                color:blue;
            }
            li img {
                vertical-align:middle;
                border:1px solid #000;
                margin:0 10px 0 0; padding:0;
            }
        </style>
    </head>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://www.youtube.com/rssls?gl=JP&hl=ja'>YouTube:RSSについて</a></p>
        <p>YouTube動画：「hamster+cute」で全文検索した結果から最新10件を表示。</p>
<!-- CODE -->
        <ul id="results"></ul>
<!-- / CODE -->
    </body>
</html>

YouTube Chromeless Video Player
クロムレスプレーヤー埋め込みプラグイン

2011/1/10

YouTube Chromeless Video Player

MIT＆GPL
jquery.js、swfobject.js、jquery.ytchromeless.js

YouTube JavaScript Player APIとjQueryを使用して、指定したYouTube動画をクロムレスプレーヤーで埋め込むjQueryプラグイン。 WatchページのURLをリンクで指定するだけで簡単に埋め込むことができます。 同一ページに複数のプレーヤーを設置することも可能です。 動画の埋め込みにはSWFObjectが使用されています。

再生・一時停止ボタン、ステータスバー、ミュートON/OFFボタンは1枚画像になっており、プレーヤーの見た目をカスタムできるようになっています。

▼head要素内に記述

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' ></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
<script type='text/javascript' src='path/to/jquery.ytchromeless.js'></script>
<script type='text/javascript'>
　$(function(){
　　$('.video-link').ytchromeless();
　});
</script>

▼body要素内に記述

<a class='video-link' href='http://www.youtube.com/watch?v=動画ID'>動画タイトル</a>
例）
<a class='video-link' href='http://www.youtube.com/watch?v=9YEEl52u8XE'>寝てるとこ</a>
<a class='video-link' href='http://www.youtube.com/watch?v=8e_wXc0m97w'>うろうろ</a>
設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.ytchromeless.js"></script>
        <script type="text/javascript">
            $(function(){
                    $('a.video-link').ytchromeless();
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
.video-player { margin:20px; width:300px; }
.video-controls { 
    background:#dedede; 
    height:30px;
    margin:-4px 0 0;
    position:relative;
    width:300px;
}
.status { height:20px; left:30px; position:absolute; top:5px; width:115px; }
.bar { background:#a4a4a4; height:10px; position:relative; top:5px; }
.loaded { background:#bbb; height:10px; left:0; position:absolute; top:0; }
.indicator { background:#212121; display:block; height:10px; left:0; position:absolute; top:0; width:20px; }
.play-pause, .volume { 
    background:url(/content/img/ajax/btn-controls.png) no-repeat;
    display:block;
    height:20px;
    overflow:hidden;
    position:absolute;
    text-indent:-9999px;
    top:5px;
    width:20px;
}
.play-pause { left:5px; }
.playing { background-position:0 -20px; }
.volume { background-position:0 -60px; right:110px; }
.muted { background-position:0 -40px; }
.view-youtube { 
    color:#000;
    display:block; 
    float:right; 
    font-size:9px; 
    line-height:30px;
    padding:0 5px 0 0;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:-1px;
}
        </style>
    </head>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://www.viget.com/inspire/youtube-chromeless-video-jquery-plugin/' target='_blank'>YouTube Chromeless Video Player</a></p>
<!-- CODE -->
        <a class="video-link" href="http://www.youtube.com/watch?v=9YEEl52u8XE">寝てるとこ</a>
        <a class="video-link" href="http://www.youtube.com/watch?v=8e_wXc0m97w">うろうろ</a>
<!-- / CODE -->
    </body>
</html>

jQuery Youtube playlist plugin
カスタマイズ性に富んだオリジナルの再生リストが作れる

2011/1/10

jQuery Youtube playlist plugin

jquery.js、jquery.youtubeplaylist.js

YouTube JavaScript Player APIとjQueryを使用して、指定し動画を切替形式あるいはギャラリー形式で表示するjQueryプラグイン。 WatchページのURLをリンクで指定するだけで簡単に埋め込むことができます。

パラメータで動画の幅・高さ、テキストリンクまたはサムネイル付きリンクの有無、自動再生の有無、インライン再生の有無などが指定できるのでプレーヤの細かなカスタマイズが可能です。 切替形式の場合も同一ページ内に複数のセットを設置することが可能です。

▼head要素内

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' ></script>
<script type='text/javascript' src='path/to/jquery.youtubeplaylist.js'></script>
<script type='text/javascript'>
　$(function(){
　　$('#demo1').ytplaylist();
　});
</script>

▼head要素内

<div class='yt_holder'>
　<div id='ytvideo'></div>
　　<ul id='demo1'>
　　　<li><a href='http://www.youtube.com/watch?v=8e_wXc0m97w'>うろうろ</a></li>
　　　<li><a href='http://www.youtube.com/watch?v=GILIk8W00s4'>布団にもぐるところ</a></li>
　　　<li><a href='http://www.youtube.com/watch?v=9YEEl52u8XE'>寝てるとこ</a></li>
　</ul>
</div>
設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.youtubeplaylist.js"></script>
        <script type="text/javascript">
            $(function(){
                $("ul#demo1").ytplaylist();
                $("ul#demo2").ytplaylist({
                    addThumbs:true,
                    autoPlay:false,
                    holderId:'ytvideo2'
                });
                $.getJSON(
                    "http://gdata.youtube.com/feeds/api/users/cocoism3/favorites",
                    {
                        alt:"json"
                    },
                    function(xml) {
                        var feed = xml.feed;
                        var s='';
                        $.each(feed.entry, function(i,item){
                            var tmp=item.id.$t.split("videos/");
                            var vid=tmp[tmp.length-1];
                            s+='<li><a href="http://www.youtube.com/watch?v='+vid+'"></a></li>';
                        });
                        $("ul#demo3").append(s).ytplaylist({
                            addThumbs:true, 
                            autoPlay:false, 
                            playerWidth:'240',
                            playerHeight:'180',
                            thumbSize:'small',
                            showInline:true
                        });
                    }
                );
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
#ytvideo,
#ytvideo2 {
    float:left;
    margin-right:10px;
}
.yt_holder {
    background:#f3f3f3;
    padding:10px;
    float:left;
    border:1px solid #e3e3e3;
    margin-bottom:15px;
}
.yt_holder ul {
    float:left;
    margin:0;
    padding:0;
    width:220px;
}
.yt_holder ul li {
    list-style-type:none;
    display:block;
    background:#f1f1f1;
    float:left;
    width:216px;
    margin-bottom:5px;
    padding:2px;
}
.yt_holder ul li img {
    width:120px;
    float:left;
    margin-right:5px;
    border:1px solid #999;
}
.yt_holder ul li a {
    font-family:georgia;
    text-decoration:none;
    display:block;
    color:#000;
}
.yt_holder .currentvideo {
    background:#e6e6e6;
}

.yt_holder3 ul {
    margin:0; padding:0;
    list-style:none;
}
.yt_holder3 ul li {
    width:240px;
    height:180px;
     list-style:none;
   float:left;
    margin:0 10px 10px 0; padding:0;
    overflow:hidden;
    background:#e5e5e5;
}
.yt_holder3 ul li a {
    text-decoration:none;
    display:block;
    border:none;
}
.yt_holder3 ul li img {
    border:none;
    width:240px; height:180px;
}
.yt_holder3 .currentvideo {
    background:#bbb;
}
        </style>
    </head>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://www.micc.unifi.it/ferracani/blog/web-applications/jquery-youtube-playlist-plugin/' target='_blank'>jQuery Youtube playlist plugin</a></p>
<!-- CODE -->
        <h2>指定した動画を切替表示（テキストリンク）</h2>
        <div class="yt_holder">
            <div id="ytvideo"></div>
            <ul id="demo1">
                <li><a href="http://www.youtube.com/watch?v=8e_wXc0m97w">うろうろ</a></li>
                <li><a href="http://www.youtube.com/watch?v=GILIk8W00s4">布団にもぐるところ</a></li>
                <li><a href="http://www.youtube.com/watch?v=9YEEl52u8XE">寝てるとこ</a></li>
            </ul>
        </div>
        <br clear="all" />
        <h2>指定した動画を切替表示（サムネイル付きリンク）</h2>
        <div class="yt_holder">
            <div id="ytvideo2"></div>
            <ul id="demo2">
                <li><a href="http://www.youtube.com/watch?v=8e_wXc0m97w">うろうろ</a></li>
                <li><a href="http://www.youtube.com/watch?v=GILIk8W00s4">布団にもぐるところ</a></li>
                <li><a href="http://www.youtube.com/watch?v=9YEEl52u8XE">寝てるとこ</a></li>
            </ul>
        </div>
        <br clear="all" />
        <h2>ギャラリー</h2>
        <p>お気に入り登録している動画フィードを取得して表示してみました。</p>
        <div class="yt_holder3">
            <ul id="demo3"></ul>
        </div>
        <br clear="all" />
<!-- / CODE -->
    </body>
</html>

Oembed plugin for jQuery
写真、動画など様々なメディアをURLだけで簡単に埋め込める

2011/1/10

OEmbed plugin for jQuery

MIT
jquery.js v1.4.2（1.4.4だと動かない）、jquery.oembed.js

WikipediaのURL、さまざまな写真やビデオの共有サービスにアップされているコンテンツのURLを指定するだけで、簡単にWebページに埋め込めるjQueryプラグイン。 Flickr、Myspace Videos、Slideshare、Twitpic、Vimeo、Wikipedia、WordPress、YouTubeなどのサービスに対応しています。

埋め込む時の縦横の最大サイズを指定することができます。 Vimeoはテキストの色、自動再生の有無などをさらに細かく指定可能です。

▼head要素内に記述

$(function(){
　$('.oembed').oembed(
　　null,
　　{
　　　vimeo:{color:'ff6699', portrait:false, autoplay:false}, //自動再生、テキスト色指定
　　　maxWidth:300,maxHeight:300
　　}
　);
});

▼body要素内に各種コンテンツを埋め込みをリンク形式で指定します。

/* YouTube */
<a href='http://www.youtube.com/watch?v=9YEEl52u8XE' class='oembed'>YouTube Video</a>
/* Vimeo */
<a href='http://vimeo.com/17621410' class='oembed'>Vimeo Video</a>
/* Flickr */
<a href='http://www.flickr.com/photos/22559849@N06/5335062455/' class='oembed'>Flickr Image</a>
/* twitpic */
<a href='http://twitpic.com/2zhvap' class='oembed'>Twitpic Image</a>
/* Slideshare */
<a href='http://www.slideshare.net/williswee/top-50-facebook-pages-2009-2624154' class='oembed'>Slideshare - Top 50 Facebook Pages 2009</a>
/* Wikipedia */
<div style='border:1px solid #ccc;background:#eee;padding:10px;'>
　<a href='http://ja.wikipedia.org/wiki/Vimeo' class='oembed'>Vimeo - Wikipedia</a>
</div>
設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.oembed.js"></script>
        <script type="text/javascript">
            $(function(){
                /* sample1 */
                $("#photo").oembed(
                    "http://www.flickr.com/photos/22559849@N06/5335062455/",
                    {maxWidth:200, maxHeight:200}
                );
                $(".oembed").oembed(
                    null,
                    {vimeo:{color:"ff6699", portrait:false, autoplay:false},maxWidth:300,maxHeight:300}
                );
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            h3 { margin:20px 0 0 0; padding:0; }
        </style>
    </head>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://code.google.com/p/jquery-oembed/' target='_blank'>OEmbed plugin for jQuery</a></p>
<!-- CODE -->
<h2>例：Flickrの写真を埋め込む</h2>
<div id="photo">php_javascript_room, on Flick</div>
<h2>例：各種コンテンツを埋め込み</h2>
<h3>YouTube</h3>
<div><a href="http://www.youtube.com/watch?v=9YEEl52u8XE" class="oembed">YouTube Video</a></div>
<h3>Vimeo（自動再生の有無、テキストの色など指定可）</h3>
<div><a href="http://vimeo.com/17621410" class="oembed">Vimeo Video</a></div>
<h3>Flickr</h3>
<div><a href="http://www.flickr.com/photos/22559849@N06/5335062455/" class="oembed">Flickr Image</a></div>
<h3>twitpic</h3>
<div><a href="http://twitpic.com/2zhvap" class="oembed">Twitpic Image</a></div>
<h3>Slideshare</h3>
<div><a href="http://www.slideshare.net/williswee/top-50-facebook-pages-2009-2624154" class="oembed">Slideshare - Top 50 Facebook Pages 2009</a></div>
<h3>Wikipedia</h3>
<div style="border:1px solid #ccc;background:#eee;padding:10px;"><a href="http://ja.wikipedia.org/wiki/Vimeo" class="oembed">Vimeo - Wikipedia</a></div>
<!-- / CODE -->
    </body>
</html>

jQuery YouTube Plugin
任意のキーワードでのYouTube動画検索結果をWebページに表示

2011/1/10

jQuery YouTube Plugin

jquery.js、jquery.youTube.js

任意のキーワードでのYouTube動画検索結果を簡単にWebページに表示できるjQueryプラグイン。

タイトル、検索キーワード、取得件数、サムネイルの大きさ（small or large）を指定可能です。 検索結果に表示する、動画サムネイルのサイズ、作成者の指定、説明文の長さや、タイトル、説明文、評価、評価数、再生回数の表示・非表示はオプションでカスタマイズ可能です。

▼head要素内に記述

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' ></script>
<script type='text/javascript' src='path/to/jquery.youTube.js'></script>
<script type='text/javascript'>
 $(function(){
  $('.youtube-videos').youTube({
   videoHeader :'YouTube動画検索「オムライス」'　//タイトル
   ,results :5 　//取得件数
   ,query :'オムライス'　//検索キーワード
   ,orderBy :null　//ソート方法
   ,author :null　//作成者
   ,showRatings :false　//星印を表示するか(CSSのクラスで各レベルに応じた星を用意 00,05,10,15,20,25,30,35,40,45,50)
   ,showNumRatings :true　//評価の実数を表示するか
   ,showViews :true　再生回数を表示するか
   ,showDescription :true　//動画の説明文を表示するか
   ,descriptionLength :150　//説明文の長さ
   ,thumbnail :'small'　//サムネイルサイズ（small:120x90またはlarge:480x360）
  });
 });
</script>

▼body要素内に記述

<div class='youtube-videos'></div>
設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.youTube.js"></script>
        <script type="text/javascript">
            $(function(){
                $('.youtube-videos').youTube({
                    videoHeader : 'YouTube動画検索「オムライス」'
                    ,results : 5                                /* number of results to return / display */
                    ,query : 'オムライス'
                    ,orderBy : null                                /* what to order the results by */
                    ,author : null                                /* author of the video */
                    ,showRatings : false                            /* Display the rating stars assigns a class of 00,05,10,15,20,25,30,35,40,45,50 */
                    ,showNumRatings : true                        /* Displays the actual number of ratings */
                    ,showViews : true                            /* show number of views for the video */
                    ,showDescription : true                        /* show a clipped version of the video description */
                    ,descriptionLength : 150                    /* length of the description to bring back, will append ... to the end */
                    ,thumbnail : 'small'                        /* small: 120x90 | large: 480 x 360 */
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            p { margin:0; padding:0; }
            .video-item {
                margin:10px; padding:0;
                width:120px;
                float:left;
            }
            .video-thumb {
                margin:0; padding:0;
            }
            .video-info {
                margin:0; padding:0;
            }
            .video-desc {
                margin:0; padding:0;
            }
            .video-info div {
                margin:0; padding:0;
            }
        </style>
    </head>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://www.webdevkungfu.com/jquery-youtube-plugin/' target='_blank'>jQuery YouTube Plugin</a></p>
<!-- CODE -->
<div class="youtube-videos"></div>
<br clear="all" />
<!-- / CODE -->
    </body>
</html>

jQuery YouTube TubePlayer Plugin
プレーヤーのコントロール制御と各種イベント発生時のコールバックが用意されている

2011/1/11

jQuery YouTube TubePlayer Plugin

MIT＆GPL
jquery.js、swfobject.js、jQuery.tubeplayer.js
Firefox 3.5+, Chrome 5, Opera 10, Safari 5, IE6+

YouTubeプレーヤーに簡単に独自のコントロールを付けることができるjQueryプラグイン。 動画の埋め込みには、SWFObjectが使用されています。

カスタマイズできるコントロールには、 再生、一時停止、停止、シーク、音量変更、画質変更、データ検索があります。

プレーヤーの操作により再生、一時停止、ミュートの設定・解除、シーク位置が変更された時や、 プレーヤーの状態が変更された時のイベントが取得できるため、それぞれのタイミングで処理を実行することもできます。 コールバックには、onPlayerUnstarted, onPlayerEnded、onPlayerPlaying、onPlayerPaused、onPlayerBuffering、onPlayerCued、onQualityChange、onErrorNotFound、onErrorNotEmbeddableがあります。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jQuery.tubeplayer.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#youtube-player-container").tubeplayer({
                    width:560, // プレーヤーの幅
                    height:340, // プレーヤの高さ
                    allowFullScreen:"true", // フルスクリーン再生を許可するか
                    initialVideo:"9YEEl52u8XE", // 動画ID
                    playerID:"youtube-player", // 埋め込み先の要素ID
                    preferredQuality:"default", // 画質（default, small, medium, large, hd720）
                    // プレーヤーが操作された時
                    onPlay:function(id){updateHTML("動画が再生されました");}, // after the play method is called
                    onPause:function(){updateHTML("動画を一時停止しました");}, // after the pause method is called
                    onStop:function(){updateHTML("動画の再生を停止しました");}, // after the player is stopped
                    onSeek:function(time){updateHTML("シーク位置が変更されました");}, // after the video has been seeked to a defined point
                    onMute:function(){updateHTML("ミュートを設定しました");}, // after the player is muted
                    onUnMute:function(){updateHTML("ミュートが解除されました");}, // after the player is unmuted
                    // プレーヤーの状態が変更された時
                    onPlayerUnstarted:function(){updateHTML("未再生");}, // when the player returns a state of unstarted
                    onPlayerEnded:function(){updateHTML("再生終了");}, // when the player returns a state of ended
                    onPlayerPlaying:function(){updateHTML("再生中");}, //when the player returns a state of playing
                    onPlayerPaused:function(){updateHTML("一時停止中");}, // when the player returns a state of paused
                    onPlayerBuffering:function(){updateHTML("バッファリング中");}, // when the player returns a state of buffering
                    onPlayerCued:function(){updateHTML("キュー");}, // when the player returns a state of cued
                    onQualityChange:function(quality){updateHTML("画質が変更されました");}, // a function callback for when the quality of a video is determined
                    //エラー
                    onErrorNotFound:function(){updateHTML("動画が見つかりません");}, // if a video cant be found
                    onErrorNotEmbeddable:function(){updateHTML("埋め込みできません");} // if a video isnt embeddable
                });
                function updateHTML(s){
                    $("#status").html(s);
                }
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
        </style>
    </head>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://www.tikku.com/jquery-youtube-tubeplayer-plugin' target='_blank'>jQuery YouTube TubePlayer Plugin</a></p>
<!-- CODE -->
        <div id='youtube-player-container'></div>
        <p>
            <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("play")'>再生</a>　
            <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("pause")'>一時停止</a>　
            <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("stop")'>停止</a>　
            <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("mute")'>ミュート</a>　
            <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("unmute")'>ミュート解除</a>
        </p>
        <p>動画のスータス：<span id="status"></span></p>
<!-- / CODE -->
    </body>
</html>

A jQuery Plugin For All Your Video Embedding Needs
YouTubeやVimeoなどの動画をWebページに埋め込み

unknown

A jQuery Plugin For All Your Video Embedding Needs

jquery.js、jquery.vid.js

YouTube、Vimeo、Dailymotion、1Click2Fameなどの動画を、動画IDを指定するだけでWebページに動画を埋め込めるjQueryプラグイン。

HD、クロムレス、自動再生の有無などもパラメータでカスタマイズできます。 プレーヤーのサイズは出力先の要素のボックスサイズとして指定します。

▼head要素内に記述

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' ></script>
<script type='text/javascript' src='path/to/jquery.vid.js'></script>
<script type='text/javascript'>
 $(function(){
  $('#youtube').vid({
   type:'youtube',
   videoId:'9YEEl52u8XE',
   autoPlay:true,
   chromless:true
  });
  $('#vimeo').vid({
   type:'vimeo',
   videoId:'17621410'
  });
  $('#dailymotion').vid({
   type:'dailymotion',
   videoId:'xgi604'
  });
 });
</script>

▼body要素内に記述

<h2>YouTube</h2>
<div id='youtube'></div>
<h2>Vimeo</h2>
<div id='vimeo'></div>
<h2>dailymotion</h2>
<div id='dailymotion'></div>

※ソース内のchromelessは、chromlessと表記が揺れていましたので、chromlessに変えました。
※Dailymotionの動画を埋め込む際は、URLが変わったようで、JS内のURL生成部分を下記に変更すれば動きます。 

jquery.vid.js
case 'dailymotion':
//h+='ailymotion.com/swf/'+c.videoId+'?enablejsapi=1&autoplay='+(c.autoPlay?'1':'0');
h+='dailymotion.com/swf/video/'+c.videoId+'?enablejsapi=1&autoplay='+(c.autoPlay?'1':'0');
設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.vid.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#youtube').vid({
                    type:'youtube',
                    videoId:'9YEEl52u8XE',
                    autoPlay:true,
                    chromless:true
                });
                $('#vimeo').vid({
                    type:'vimeo',
                    videoId:'17621410'
                });
                $('#dailymotion').vid({
                    type:'dailymotion',
                    videoId:'xgi604'
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            #youtube    { width:280px; height:170px; }
            #vimeo        { width:280px; height:158px; }
            #dailymotion{ width:280px; height:157px; }
        </style>
    </head>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://ahmednuaman.com/blog/2009/11/01/introducing-vid-a-jquery-plugin-for-all-your-video-embedding-needs/' target='_blank'>A jQuery Plugin For All Your Video Embedding Needs</a></p>
<!-- CODE -->
        <h2>YouTube</h2>
        <div id="youtube"></div>
        <h2>Vimeo</h2>
        <div id="vimeo"></div>
        <h2>dailymotion</h2>
        <div id="dailymotion"></div>
<!-- / CODE -->
    </body>
</html>

YouTubin’ Plugin for jQuery
YouTube動画のURLを指定でプレーヤーをWeb埋め込み

2011/1/11

YouTubin’ Plugin for jQuery

BSD
jquery.js、swfobject.js、jquery.youtubin.js

YouTube動画のURLをリンク指定するだけで簡単にWebページにプレーヤーを埋め込めるjQueryプラグイン。 動画の埋め込みには、SWFObjectが使用されています。

オプションで、自動再生の有無、プレーヤーの縦横サイズなども指定可能です。 replaceTimeを指定すると、リンククリックでYouTubeプレーヤーを表示することができます。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.youtubin.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#youtube').youtubin({
                    swfWidth:560,
                    swfHeight:340
                });
                $('#youtubin-click').youtubin({
                    swfWidth:560,
                    swfHeight:340,
                    autoplay:false,
                    replaceTime:'click'
                });
            });
        </script>
        <!-- CSS -->
    </head>
    <body>
        <h1>設置サンプル</h1>
        <p>参考：<a href='http://jonraasch.com/blog/youtubin-jquery-plugin' target='_blank'>YouTubin’ Plugin for jQuery</a></p>
<!-- CODE -->
        <p><a href="http://www.youtube.com/watch?v=8e_wXc0m97w" rel="nofollow" id="youtube">Check out this video</a></p>
        <p><a href="http://www.youtube.com/watch?v=8e_wXc0m97w" rel="nofollow" id="youtubin-click">クリックでYouTube動画再生<br></a></p>
<!-- / CODE -->
    </body>
</html>

Making a Custom YouTube Video Player With YouTube’s APIs
プログレスバーと各種コントロールをカスタマイズできるクロムレスプレーヤーの埋め込み

2011/1/11

Making a Custom YouTube Video Player With YouTube’s APIs

jquery.js、jquery.swfobject.1-1-1.js、youTubeEmbed-jquery-1.0.js

YouTubeの動画URLを指定するだけで、カスタマイズしたクロムレスプレーヤーを設置できるjQueryプラグイン。 動画の埋め込みには、jQuery SWFObject Pluginが使用されています。

プログレスバーはCSSでデザインされており、各種ボタン（再生、リピート、一時停止）は画像をCSSで指定して、プレーヤーの見た目がカスタマイズされています。 オプションで、プレーヤーの幅（高さは幅から自動算出）、プログレスバーの有無（デフォルトは有）を指定可能です。

※playerapiidにYouTubeの動画IDを使用しているので、同一ページ内に同じ動画IDの動画を埋め込むと動作しません。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.swfobject.1-1-1.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/youTubeEmbed-jquery-1.0.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#player1').youTubeEmbed('http://www.youtube.com/watch?v=9YEEl52u8XE');
                $('#player2').youTubeEmbed({
                    video:'http://www.youtube.com/watch?v=8e_wXc0m97w',
                    width:320, // Height is calculated automatically
                    progressBar:false // Hide the progress bar
                });
                $('#player3').youTubeEmbed({
                    video:'http://www.youtube.com/watch?v=GILIk8W00s4',
                    width:320, // Height is calculated automatically
                    progressBar:true // Hide the progress bar
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
.flashContainer{
    position:relative;
    overflow:hidden;
}
.progressBar{
    display:none;
    position:absolute;
    width:auto;
    height:8px;
    left:20px;
    right:105px;
    bottom:20px;
    background-color:#141414;
    overflow:hidden;
    cursor:pointer;
    /* A light CSS3 bottom highlight */
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
}
.progressBar .elapsed{
    position:absolute;
    width:0;
    height:100%;
    background-color:#1fa2f6;
    border-right:1px solid #49AFF0;
}
.controlDiv{
    /* Centering the control div */
    position:absolute;
    width:120px;
    height:120px;
    cursor:pointer;
    top:50%;
    left:50%;
    margin:-60px 0 0 -60px;
}
.controlDiv.play{
    background:url(/content/img/ajax/play.png) no-repeat center center;
}
.controlDiv.replay{
    background:url(/content/img/ajax/replay.png) no-repeat center center;
}
.controlDiv.pause{
    background:url(/content/img/ajax/pause.png) no-repeat -99999px;
}
.flashContainer:hover .controlDiv.pause{
    background-position:center center;
}
/* Only show the progress bar when the video is playing */
.flashContainer.playing:hover .progressBar{
    display:block;
}
        </style>
    </head>
    <body>
        <h1>設置サンプル</h1>
        <p>参照：<a href='http://tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/' target='_blank'>Making a Custom YouTube Video Player With YouTube’s APIs</a></p>
<!-- CODE -->
    <h2>デフォルト</h2>
    <p id="player1"></p>
    <h2>プログレスバー無、プレーヤーの幅指定</h2>
    <p id="player2"></p>
    <h2>プログレスバー有、プレーヤーの幅指定</h2>
    <p id="player3"></p>
<!-- / CODE -->
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2025 PHP & JavaScript Room All Rights Reserved.

pagetop