参照：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>