字幕のフォントサイズ：
字幕が付いている動画（クッキング）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>YouTube IFrame API：動画プレーヤ―の基本的な埋め込み（jQuery使用）</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var player;
/* IFrame Player APIのコードをロード */
function fGetScript(){
$.ajax({
url:"http://www.youtube.com/player_api/",
dataType:"script",
success:function(data){
dbg("done");
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
dbg("onYouTubeIframeAPIReady");
getPL();
}
},
error:function(xhr, status, thrown) {
dbg(xhr);
fGetScript();
}
});
}
fGetScript();
function getPL(){
/* how to make cooking」が含まれている字幕付き動画を評価が高い順に取得 */
$.ajax({
"url":"http://gdata.youtube.com/feeds/api/videos",
"data":{"q":"how+to+make+cooking","orderby":"rating","caption":true,"v":2,"alt":"json-in-script"},
"type":"get",
"dataType":"jsonp"
})
.success(function(xml){
dbg("success");
getList(xml);
})
.error(function(xhr, status, thrown){
dbg("error:"+status+"/"+thrown);
getPL();
});
}
function getList(xml){
var feed=xml.feed;
var s="";
$.each(feed.entry, function(i,item){
var tmp=item.link;
$.each(tmp, function(j, lnk){
if(lnk.href.indexOf("watch?v=")!=-1){
var tmp2=lnk.href.split("watch?v=");
tmp2=tmp2[1].split("&");
var vid=tmp2[0];
var title=(item.title)?item.title.$t:"no title";
if(vid){
$('<li><a href="#" rel="'+vid+'">'+title+'</a></li>').appendTo($("#videos"));
}
}
});
});
loadPlayer($("#videos li:first a").attr("rel"),0);
}
$("#videos li a").live("click",function(event){
loadPlayer($(this).attr("rel"),$(this).parent().index());
});
/* プレーヤー生成 */
function loadPlayer(videoID,idx) {
dbg("loadPlayer("+videoID+")");
$("#videos li").css("font-weight","normal");
$("#videos li").eq(idx).css("font-weight","bold");
if(!player){
player = new YT.Player(
'player',{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: videoID, /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady, /* プレーヤの準備完了時 */
"onApiChange": onPlayerApiChange
},
playerVars: {
"rel":0, // 関連動画の有無(default:1)
"iv_load_policy":3, // アノテーション有無(default:1, 3で無効)
"cc_load_policy":1, // 字幕有無(1:ON、defaultはユーザー設定)
"controls":1 // コントロール有無(default:1)
}
}
);
}else{
player.loadVideoById(videoID);
}
}
function onPlayerReady(event){
event.target.playVideo(); /* 動画再生 */
}
function onPlayerApiChange(event){
ccFontsizeChange();
}
$("input:radio[name=r]").click(function(){
ccFontsizeChange();
});
function ccFontsizeChange(){
var size=$('input:radio[name=r]:checked').val();
dbg("size:"+size);
player.setOption("cc","fontSize",size);
}
function dbg(str){
if(window.console && window.console.log){
console.log(str);
}
}
});
</script>
<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>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：字幕付き動画一覧表示＋字幕のフォントサイズ変更</h2>
<p>字幕のフォントサイズ：
<label id="r1"><input type="radio" id="r1" name="r" value="-1">-1</label>
<label id="r2"><input type="radio" id="r2" name="r" value="0" checked>0(default)</label>
<label id="r3"><input type="radio" id="r3" name="r" value="1">1</label>
<label id="r4"><input type="radio" id="r4" name="r" value="2">2</label>
<label id="r5"><input type="radio" id="r5" name="r" value="3">3</label>
</p>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<p>字幕が付いている動画（クッキング）</p>
<ul id="videos"></ul>
</div>
</body>
</html>