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

実行結果

設置サンプル

YouTube IFrame API：動画プレーヤ―の基本的な埋め込み（jQuery使用）

設置サンプルのソース

<!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;
            var playerFLG=0;
            //YouTube iFrame Player API
            var tag=document.createElement('script');
            tag.src="//www.youtube.com/iframe_api";
            var firstScriptTag=document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            /* プレーヤーの準備完了時 */
            window.onYouTubeIframeAPIReady=function() {
               dbg("onYouTubeIframeAPIReady");
               /* 3番目の動画を再生 */
               var first=$("#playlist li a").eq(2);
               first.css("font-weight","bold");
               loadPlayer(first.attr("rel"));
            }
            /* プレーヤー生成 */
            function loadPlayer(videoID) {
               dbg("loadPlayer("+videoID+")");
               /* 埋め込むオブジェクトを生成 */
               if(!playerFLG){
                  player = new YT.Player(
                     'player',{
                        width: '640',   /* 動画プレーヤーの幅 */
                        height: '390',   /* 動画プレーヤーの高さ */
                        videoId: videoID,   /* YouTube動画ID */
                        events: { /* イベント */
                           "onReady": onPlayerReady   /* プレーヤの準備完了時 */
                        }
                     }
                  );
               }else{
                  /* プレーヤー内の動画差替 */
                  player.loadVideoById(videoID,0);
               }
               playerFLG++;
            }
            function onPlayerReady(event){
               event.target.setVolume(50);   /* 音量調整 */
               event.target.playVideo();   /* 動画再生 */
            }
            /* 指定した動画を再生 */
            $("#playlist > li > a").click(function(){
               loadPlayer($(this).attr("rel"));
               $(this).parent().parent().find("a").css("font-weight","normal");
               $(this).css("font-weight","bold");
            });
            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：動画プレーヤ―の基本的な埋め込み（jQuery使用）</h2>
         <div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
         <ul id="playlist">
            <li><a href="#" rel="9YEEl52u8XE">Sleeping Dog</a></li>
            <li><a href="#" rel="XfkXW49bXfo">Hiyoko of Tea</a></li>
            <li><a href="#" rel="j4zpzF0R1ow">The fireworks of Tokyo Disney land</a></li>
         </ul>
      </div>
   </body>
</html>