• ベストアンサー

YouTubeをブログに貼る時、1つのボタンで2つの動画を同時に、再生、停止、一旦停止等するにはどうすればいいですか?

YouTubeをブログに貼る時、1つのボタンで2つの動画を同時再生等するにはどうすればいいですか? 著作権は問題がありません。 http://sothis.blog.so-net.ne.jp/2009-10-21 のソースを参考にfc2ブログに貼りつけたいのですが、htmlの書き方がわかりません。 動画のURL欄を、sample1、sample2とする形で、htmlを書いて下さるとありがたいです。 同時再生できれば、JavaScriptを使わなくてもいいです。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.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>

参考URL:
http://code.google.com/intl/ja/apis/youtube/js_api_reference.html
youtubed
質問者

お礼

素早いご解答、どうもありがとうございます。 おかげさまで、同時再生等が出来ました。 "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;"> にセンスを感じました。便利なタグですね。別の所でも使わせていただきます。 画像を文字に置き換えたりと、余計な装飾のカットまで、本当にどうもありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • ブログにyoutube動画を貼れますか?

    自分で撮影した動画をyoutubeに投稿しており、その動画をブログにも貼りたいのですが、URL表示ではなく、youtubeの画面を表示させたいです。 つまり、映像の画面がブログに大きくあり、再生ボタンが映像の中心にある状態ということです。 それは可能なのでしょうか? また、その手順を教えてください。

  • 著作権に関して blogにはりつけたYouTube動画

    ちょっとおや?と思うことがあったので質問させてください。 自分は今blogをやっているのですが、気に入った曲があったのでYouTubeで動画があったので・・その曲のhtmlタグを貼り付けて 自動再生・ループ再生をしています。表示サイズを5×10にして、みばえはYoutube動画ではないようになっています・・。非常に小さく発見不可能なくらいです これは著作権の問題にかかりますか?youtubeの動画は私が投稿したものではありません。

  • youtubeの動画を小さくFC2ブログに埋め込む

    ブログを巡回していたところ、youtubeの動画を埋め込んでいるブログがありました。 私も紹介したい動画(というよりか音源)がありましたので 早速真似て、youtubeからコピーしてきたタグを埋め込んだのですがどうも違うんです。 その方の埋め込んだものは、youtubeから持ってきたのは間違いないと思うのですが 動画部分が無く、音声の再生と時間の調整、フルスクリーンで見れるようにする拡大アイコンだけなのです。FC2にそのようなサービスがあるのか探しても見つからず、グーグル等で検索もしましたが 思い描いたような結果は得られませんでした。 乱文、駄文失礼致しました。どなたかわかる方、回答よろしくお願い致します。

  • FirefoxでYouTubeが再生できません

    Mozilla FirefoxでYahoo!Blogに投稿組み込み投稿されたYouTubeの動画か見れません そのyoutubeのどうかが、入っているところにこのコンテンツの表示にはプラグインが必要ですと表示されていて再生できません。もちろんアドビ・フラッシュプレーヤーはしっかりインストールしてあって プラグインのところで確認しても常に有効となっていてしっかり有効なのでYahoo!Blog上で再生できるはずなのですが、コンテンツの表示にはプラグインが必要ですとなっていることは、フラッシュプレヤーがインストールされていないよとFirefox側でみなしちゃっているんだよね。 youtubeのサイトではちゃんとブログに投稿された動画は再生されます。 これはYahoo!Blog側の問題なのでしょうか? それともFirefoxでまだ何か設定が必要? ほかのFC2ブログに投稿されているFC2動画は問題なくブログ場で再生できました。 ヤフーブログ上のyoutubeだけプラグインが必要となり再生できません。

  • Youtubeの一般動画のブログ転載許可について

    Youtubeの一般動画で、 共有から、埋め込み用ソースが取得できる動画なら、誰でも自分ののブログ等に埋め込んで、勝手に紹介してもいいものだと思っていたのですが、それは、違うのでしょうか? ※多くのブログのYoutube埋め込みが、いちいち、アップ者の許可を取っているとも思えないので、、 また、そういった事は、youtubeの規約のどこに書いてあるのでしょうか? 後、youtubeの著作権絡みで、一般人が一番気を付けるべきことは何でしょうか?

  • YOUTube動画をブログに載せる方法を教えて

    気に入ったYOUTube動画を自分のブログ記事に載せたいのですが、どのような手順でやれば可能でしょうか? 教えてください。 ちなみにブログはFC2です。 よろしくお願いいたします。

  • Youtubeの動画再生について

    最近よくブログでYoutubeの動画を、 475×320 もしくは 170×140サイズで 直接表示させている人がいますが、 あれはどうすればできるのでしょう? リンクで飛ばすのではなくて、 プレイボタンを押すとそのまま再生できるようにしたいのです。 過去の履歴を調べていろいろ工夫したのですが、 どうもうまくいかなくて・・・ ちなみに私はヤプログを使っています。 そもそもヤプログでは不可能なのでしょうか?

  • Youtubeなどの動画をブログに貼り付ける時に・・・

    初めまして。こんばんわ。 さっそく質問させて頂きます。 Youtubeなどの動画をブログに貼り付ける時に、ブラウザの更新ボタンを押すだけで、最初に貼った動画を別の動画に入れ替える事は可能でしょうか? またそれは複数の動画を入れ替える事も可能でしょうか? いろいろと調べたのですが、私一人の力では、探すことができませんでした。 すごく単調な質問かもしれませんが、どうぞよろしくお願いします。

  • 動画の再生

    ブログにYouTubeの再生画面を埋め込んで、いろいろな動画を再生したいのですが、埋め込みタグ内にある動画のURLを替えるだけで、例えば、自分の作成した動画を再生できるのでしょうか? 自分の作成した動画は通常はリアルプレイャーで再生されます。

  • blogにYouTubeの動画のリンクを貼りたいんですが…

    blogにYouTubeの動画のリンクを貼りたいんですが…私がリンクを貼りたい動画は『リクエストによる埋め込み無効』となってるので、動画を埋め込むことはできません。そこで… そのような場合は動画のURLだけを載せて、そのURLに動画のリンクを貼ることが一般的だと思うのですが、それをURLではなく画像にすることは可能(やっていいこと)なんでしょうか?つまり、YouTubeのトップページには小さな画像がたくさん載っていますよね?それを動画としてではなく静止画として一度保存し、その画像に動画のURLを貼りたいんです。 うまく説明できないんですけど、要はバナーにリンクを貼る時のような感じです。 当然その画像をクリックしてもYouTubeのその動画のページに飛ぶだけで、blog内の画像は動きません。 どなたか教えて下さい!