電子書籍の厳選無料作品が豊富!

youtubeをHPに載せたいです。
1ページに5つのラジオボタンをつけて
選択して実行すると枠の中にyoutubeが再生されるようなものは作れるのでしょうか。
無料のホームページなのでjavascriptしか動きません。
フレームで仕切ればできそうな気がするのですが・・・

A 回答 (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 …
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 … 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 …
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 … 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>
    • good
    • 0

Google提供の「YouTube JavaScript Player API 」を使っても出来ます。


http://code.google.com/intl/ja/apis/youtube/js_a …
(例)
<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&ap …
"http://www.youtube.com/v/nuJHenDGUa8?f=videos&ap …];
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>
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!