人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

●質問者: kajironpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 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 を設定する、というような具合です。


kajironpuさんのコメント
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>

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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ