PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

YouTube IFrame API:字幕付き動画一覧表示+字幕のフォントサイズ変更

字幕のフォントサイズ:        

字幕が付いている動画(クッキング)

設置サンプルのソース

<!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 &amp; 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>