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


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

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

アドバイス頂けたら幸いです。宜しくお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2017/05/04 16:45:04

ベストアンサー

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153

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 を設定する、というような具合です。

id:kajironpu

a-kuma3 いつもありがとうございます。ご無沙汰しております。
さっそくありがとうございました。e.src= urlという書き方がポイントになりますね。なかなかこのやり方はわかりませんでした。
いろいろ調べたのですがドンピシャの回答が見つからず困っておりました。
さっそくうまくいきました。ブログ記事に動画を埋め込んで毎回記事ごとに異なるキーワードから動画IDを拾ってくるように設定したいと挑戦しております。例のyoutubeのAPIは回数制限がある?のでどうなることやら。\(^o^)/

2017/04/28 13:41:37

その他の回答1件)

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153ここでベストアンサー

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 を設定する、というような具合です。

id:kajironpu

a-kuma3 いつもありがとうございます。ご無沙汰しております。
さっそくありがとうございました。e.src= urlという書き方がポイントになりますね。なかなかこのやり方はわかりませんでした。
いろいろ調べたのですがドンピシャの回答が見つからず困っておりました。
さっそくうまくいきました。ブログ記事に動画を埋め込んで毎回記事ごとに異なるキーワードから動画IDを拾ってくるように設定したいと挑戦しております。例のyoutubeのAPIは回数制限がある?のでどうなることやら。\(^o^)/

2017/04/28 13:41:37
id:rsc96074 No.2

回答回数4502ベストアンサー獲得回数437

 こちらは参考になるでしょうか。ちなみに、<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>
id:kajironpu

ありがとうございます!とてもわかりやすいコードで勉強になりました。
var video にあらかじめHTMLを作っておくのですね!
それを、document.writeで書き出すというのがとてもおもしろいですね。
メモメモ。。m(_ _)m

2017/04/28 13:43:25
  • id:psne
    大掛かりのように見えますが、IFrame Player APIを利用する方法がYouTubeを安定して再生する方法として適していると思います。
    https://developers.google.com/youtube/iframe_api_reference
  • id:kajironpu
    ありがとうございます APIは使いこなせるとかなり便利ですね 是非ともトライしたいです

    ありがとうございました m(_ _)m

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません