javascriptで動画のURLを生成したのですが､これをHTMLに渡すやり方がわかりません｡ var URL= "https://www.youtube.com/watch?v="+videoId このURLの変数をHTMLに渡す…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

javascriptで動画のURLを生成したのですが､これをHTMLに渡すやり方がわかりません｡

var URL= "https://www.youtube.com/watch?v="+videoId
このURLの変数をHTMLに渡すにはどうしたらいいのでしょうか？

↓のように動画をHTMLの中で再生したい
<video controls><source src="ここにURLを渡したい"/></video>

ｱﾄﾞﾊﾞｲｽ頂けたら幸いです｡宜しくお願いします｡

●質問者: javelover
●ｶﾃｺﾞﾘ:ｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

▽1 ● a-kuma3

ﾍﾞｽﾄｱﾝｻｰ

YouTube のﾌﾟﾚｰﾔｰは video ﾀｸﾞになりましたけど､src 属性に指定されている URL は videoId じゃないみたいです｡

試しに適当なのを拾ってみました｡
https://www.youtube.com/watch?v=6NG3mcGZhQo で視聴できる動画では､video ﾀｸﾞの src に指定されているのは blob:https://www.youtube.com/ea8b8689-f6b7-4330-96c9-d710b122a8ef でした｡

YouTube のﾌﾟﾚｰﾔｰを埋め込みたいのであれば､iframe を使います｡

例えば､こんな感じ｡

<iframe id="youtube-player"></iframe>

<script>
window.onload = function() {
 var videoId = ...
 var url = "https://www.youtube.com/embed/" + videoId;
 var e = document.getElementById("youtube-player");
 e.src = url;
}
</script>

id 属性で目印を付けた iframe を､document.getElementById で取得して､src 属性に埋め込みﾌﾟﾚｰﾔｰ用の URL を設定する､というような具合です｡

javeloverさんのｺﾒﾝﾄ
a-kuma3 いつもありがとうございます｡ご無沙汰しております｡さっそくありがとうございました｡e.src= urlという書き方がﾎﾟｲﾝﾄになりますね｡なかなかこのやり方はわかりませんでした｡いろいろ調べたのですがﾄﾞﾝﾋﾟｼｬの回答が見つからず困っておりました｡さっそくうまくいきました｡ﾌﾞﾛｸﾞ記事に動画を埋め込んで毎回記事ごとに異なるｷｰﾜｰﾄﾞから動画IDを拾ってくるように設定したいと挑戦しております｡例のyoutubeのAPIは回数制限がある？のでどうなることやら｡＼(^o^)／

▽2 ● rsc

こちらは参考になるでしょうか｡ちなみに､<iframe?></iframe>のとこは､Youtubeの[埋め込みｺｰﾄﾞ]のとこから持ってきました｡(^_^;
＃1の方の書き方のほうがｽﾏｰﾄなので､合わせ技で何とかなるんじゃないでしょうか｡(^_^;

<html>
<head>
<title>VideoTest</title>
</head>
<body>
<p>この下に動画</p>
<script type='text/javascript'><!--
 var videoId = "mJbRzj2hL90";
 var URL = "https://www.youtube.com/embed/"+videoId;
 var Video = '<iframe width="512" height="288" src="'+ URL +'" frameborder="0" allowfullscreen></iframe>';
 document.write(Video);
//--></script>
<p>この上に動画</p>
</body>
</html>

javeloverさんのｺﾒﾝﾄ
ありがとうございます！とてもわかりやすいｺｰﾄﾞで勉強になりました｡ var video にあらかじめHTMLを作っておくのですね！それを､document.writeで書き出すというのがとてもおもしろいですね｡ﾒﾓﾒﾓ｡｡m(_ _)m