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

実行結果

設置サンプル

YouTube IFrame API:プレーヤーの複数配置

2つの動画を配置し、再生・一時停止の再生ステイタスを同期させる。どちらか一方のプレーヤを一時停止すると、もう一方のプレーヤーも一時停止します。動画が最後まで再生された時のステイタスは一時停止、リプレイした時のステイタスは再生となります。

設置サンプルのソース

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>設置サンプル:YouTube IFrame API:プレーヤーの複数配置</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <style>
         #playerbox { width:700px; margin-bottom:10px; clear:both; float:none; overflow:hidden; }
         #playerbox iframe { float:left; margin:0 10px 0 0; }
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <script>
         $(function(){
            var players=[];
            /* IFrame Player APIのコードをロード */
            function fGetScript(){
               $.ajax({
                  url:"http://www.youtube.com/player_api/",
                  dataType:"script",
                  success:function(data){
                     dbg("done");
                  },
                  error:function(xhr, status, thrown) {
                     dbg(xhr);
                     fGetScript();
                  }
               }); 
            }
            fGetScript();
            /* プレーヤーの準備完了時 */
            window.onYouTubeIframeAPIReady=function() {
               dbg("onYouTubeIframeAPIReady");
               loadPlayer("9YEEl52u8XE,XfkXW49bXfo");
            }
            /* プレーヤー生成 */
            function loadPlayer(videoIDs) {
               var tmp=videoIDs.split(",");
               for(var i in tmp){
                  var videoID=tmp[i];
                  var playerID="player_"+videoID;
                  playerID=new YT.Player(
                     playerID,{
                        width: '320',
                        height: '195',
                        videoId: videoID,
                        events: { /* イベント */
                           "onReady": onPlayerReady,   /* プレーヤの準備完了時 */
                           "onStateChange": onPlayerStateChange   /* 動画プレーヤーのステータス変更 */
                        },
                        playerVars: {
                           "rel":1,         // 関連動画の有無(default:1)
                           "showinfo":0,      // 動画情報表示(default:1)
                           "controls":1      // コントロール有無(default:1)
                        }
                     }
                  );
                  players.push(playerID);
                  dbg(playerID.getIframe());
               }
            }
            function onPlayerReady(event){
               /* プレーヤの準備完了時 */
               dbg("onPlayerReady");
            }
            function onPlayerStateChange(event){
               /* プレーヤの準備完了時 */
               dbg("PlayerState:"+event.data);
               var playerID=event.target.a.id;
               if(event.data==YT.PlayerState.PAUSED){
                  for(var i in players){
                     players[i].pauseVideo();
                  }
               }else if(event.data==YT.PlayerState.PLAYING){
                  for(var i in players){
                     players[i].playVideo();
                  }
               }
            }
            function dbg(str){
               $("#debuglog").val(str+"\n"+$("#debuglog").val());
                  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>2つの動画を配置し、再生・一時停止の再生ステイタスを同期させる。どちらか一方のプレーヤを一時停止すると、もう一方のプレーヤーも一時停止します。動画が最後まで再生された時のステイタスは一時停止、リプレイした時のステイタスは再生となります。</p>
         <div id="playerbox">
            <div id='player_9YEEl52u8XE'><!-- 動画プレーヤーの埋め込み --></div>
            <div id='player_XfkXW49bXfo'><!-- 動画プレーヤーの埋め込み --></div>
         </div>
         <textarea id="debuglog" style="width:640px;height:300px;"></textarea>
      </div>
   </body>
</html>