参照:jQuery Youtube Player - Multiple Playlists
<!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> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <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>