- ベストアンサー
YouTubeをブログに貼る時、1つのボタンで2つの動画を同時に、再生、停止、一旦停止等するにはどうすればいいですか？
YouTubeをブログに貼る時、1つのボタンで2つの動画を同時再生等するにはどうすればいいですか？ 著作権は問題がありません。 http://sothis.blog.so-net.ne.jp/2009-10-21 のソースを参考にfc2ブログに貼りつけたいのですが、htmlの書き方がわかりません。 動画のURL欄を、sample1、sample2とする形で、htmlを書いて下さるとありがたいです。 同時再生できれば、JavaScriptを使わなくてもいいです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ご提示されているサイトのソースをそのままパクッって（参照して） 張り付ければできますけど。（もちろんjavascript前提です。） 以下に参考にした部分を書きます。（余計な装飾はカット） swfobject.embedSWFの引数に動画のURLと表示する<div>のidを指定します。 <body> <hr> <div id="ytapiplayer1" style="float:left;width:300px;height:200px;margin-left:5px"></div> <div id="ytapiplayer2" style="float:left;width:300px;height:200px;margin-left:5px"></div> <br style="clear: both;"> <div style="border:1px solid #FFFFFF;background-color:#DDDDDD;width:500px;height:20px;margin:10px 0"> ステータス： <span id="ytstatus">ロード中...</span> </div> <a href="javascript:void(0)" onclick="yt_play();">再生開始</a> <a href="javascript:void(0)" onclick="yt_rewind(22,3);">最初から</a> <a href="javascript:void(0)" onclick="yt_pause();">一旦停止</a> <a href="javascript:void(0)" onclick="yt_stop();">再生終了</a> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"> </script> <script type="text/javascript"> <!-- var stat = 0; //下の&enablejsapi=1の前の部分をsample1のurlに置き換える。 swfobject.embedSWF("http://www.youtube.com/v/8uwF-a59hLc&enablejsapi=1&playerapiid=ytplayer1&showinfo=0", "ytapiplayer1", "250", "207", "8", null, null, { allowScriptAccess: "always" }, { id: "myplayer1" } ); //下の&enablejsapi=1の前の部分をsample2のurlに置き換える。 swfobject.embedSWF("http://www.youtube.com/v/Y2B1kUie0sA&enablejsapi=1&playerapiid=ytplayer2&showinfo=0", "ytapiplayer2", "250", "207", "8", null, null, { allowScriptAccess: "always" }, { id: "myplayer2" } ); function putYtStatus(msg){ document.getElementById("ytstatus").innerHTML = msg; } function onPlayer1Error(){ stat = -1; putYtStatus("左の動画がありません"); } function onPlayer2Error(){ stat = -1; putYtStatus("右の動画がありません"); } function onYouTubePlayerReady( playerID ){ if( playerID == "ytplayer1" ){ player1 = document.getElementById("myplayer1"); player1.mute(); } if( playerID == "ytplayer2" ){ player2 = document.getElementById("myplayer2" ); } if( player1 != "undefined" && player2 != "undefined" ){ putYtStatus("準備完了 > PLAYボタンをクリックしてください"); stat = 1; player1.addEventListener("onError", "onPlayer1Error"); player2.addEventListener("onError", "onPlayer2Error"); } } function yt_play() { if( stat == -1 ) return; if( stat == 4 ) { if (player1) player1.playVideo(); if (player2) player2.playVideo(); }else{ yt_rewind(23,0); } if(player1 && player2){ putYtStatus("再生中"); stat = 2; } } function yt_rewind(seek1,seek2) { if( stat == -1 ) return; if (player1) player1.seekTo(seek1,true); if (player2) player2.seekTo(seek2,true); if(player1 && player2){ putYtStatus("再生中"); stat = 2; } } function yt_stop() { if (player1){player1.stopVideo();} if (player2){player2.stopVideo();} if(player1 && player2){ putYtStatus("再生停止"); stat = 3; } } function yt_pause() { if (player1) player1.pauseVideo(); if (player2) player2.pauseVideo(); if(player1 && player2){ stat = 4; putYtStatus("一旦停止中"); } } //--> </script>
お礼
素早いご解答、どうもありがとうございます。 おかげさまで、同時再生等が出来ました。 "sample1のurl&enablejsapi=1&playerapiid=ytplayer1&showinfo=0", "sample2のurl&enablejsapi=1&playerapiid=ytplayer2&showinfo=0", と置き換えました。 埋め込みましたので、<body>と<hr>は省きました。 後、http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js&quo... の、&quo...?の部分を、">に書き換えればいいんですよね？ <br style="clear: both;"> にセンスを感じました。便利なタグですね。別の所でも使わせていただきます。 画像を文字に置き換えたりと、余計な装飾のカットまで、本当にどうもありがとうございました。