- ベストアンサー
youtubeをHPに載せたいです。
youtubeをHPに載せたいです。 １ページに５つのラジオボタンをつけて 選択して実行すると枠の中にyoutubeが再生されるようなものは作れるのでしょうか。 無料のホームページなのでjavascriptしか動きません。 フレームで仕切ればできそうな気がするのですが・・・
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
DOM を使えばできると思います。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" > <title>タイトル</title></head> <body> <script type="text/javascript"> <!-- var movie1 = "<object width=480 height=385><param name=movie value=http://www.youtube.com/v/pQao8hCa7Mw&hl=ja_JP&fs=1&></param>" movie1 += "<param name=allowFullScreen value=true></param><param name=allowscriptaccess value=always></param>" movie1 += "<embed src=http://www.youtube.com/v/pQao8hCa7Mw&hl=ja_JP&fs=1& type='application/x-shockwave-flash' " movie1 += "allowscriptaccess=always allowfullscreen=true width=480 height=385></embed></object>"; var movie2 = "<object width=480 height=385><param name=movie value=http://www.youtube.com/v/6cbSZAPwji4&hl=ja_JP&fs=1&></param>" movie2 += "<param name=allowFullScreen value=true></param><param name=allowscriptaccess value=always></param>" movie2 += "<embed src=http://www.youtube.com/v/6cbSZAPwji4&hl=ja_JP&fs=1& type='application/x-shockwave-flash' " movie2 += "allowscriptaccess=always allowfullscreen=true width=480 height=385></embed></object>"; function setMovie( index ) { var mvDiv = document.getElementById('selectedMovie'); mvDiv.innerHTML = ""; switch ( index ) { case 1: mvDiv.innerHTML = movie1; break; case 2: mvDiv.innerHTML = movie2; break; } } //--> </script> <div> <input type="radio" name="myGroup" value="1" onclick="javascript:setMovie(1)">動画1 <input type="radio" name="myGroup" value="2" onclick="javascript:setMovie(2)">動画2 </div> <div id="selectedMovie"></div> </body> </html>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
Google提供の「YouTube JavaScript Player API 」を使っても出来ます。 http://code.google.com/intl/ja/apis/youtube/js_api_reference.html （例） <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script src="http://www.google.com/jsapi"></script> <script> google.load("swfobject", "2.1"); </script> </head> <body> <div> <form action="#"> <input type="radio" name="youtube" value="0" checked>犬 <input type="radio" name="youtube" value="1">猫 <button onclick='creatSWF()'>切り替え</button> </form> </div> <div id="contener"> <div id="ytapiplayer"></div> </div> <script type="text/javascript" charset="utf-8"> swfobject.addLoadEvent(function(){ creatSWF(); }); function creatSWF(){ play_url=["http://www.youtube.com/v/IQUtXsIuBAU?f=videos&app=youtube_gdata", "http://www.youtube.com/v/nuJHenDGUa8?f=videos&app=youtube_gdata"]; var check=document.getElementsByName("youtube"); for(var i=0;i<check.length;i++){ if(check[i].checked){ var url= play_url[parseInt(check[i].value)]; } } var ytplayer = document.getElementById("ytplayer"); if(!ytplayer){ var ytapiplayer = document.getElementById("ytapiplayer"); if(!ytapiplayer){ var div = document.createElement("div"); div.setAttribute("id", "ytapiplayer"); document.getElementById("contener").appendChild(div); } swfobject.embedSWF(url+'&rel=0&autoplay=1&disablekb=1&egm=1'+ '&enablejsapi=1&playerapiid=ytplayer',"ytapiplayer", "250", "200", "8", null, null, {allowScriptAccess:"always"},{id:"ytplayer"}); }else{ ytplayer.stopVideo(); ytplayer.clearVideo(); swfobject.removeSWF('ytplayer'); creatSWF(); } } function onYouTubePlayerReady(){ ytplayer = document.getElementById("ytplayer"); ytplayer.addEventListener("onStateChange","on_ytplayer_StateChange"); } function on_ytplayer_StateChange(state){ if (state==0){ creatSWF(); } } </script> </body> </html>
