こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

リンクをクリックした時にカラムの値を取得するには?

PHP初心者です。

youtubeの動画を紹介するサイトを作っています。
youtube動画は埋め込みタグを使って自サイトやブログ等のページで鑑賞できるのですが

<iframe width="640" height="390" src="http://www.youtube.com/embed/U-42Fcw5eFc" frameborder="0" allowfullscreen></iframe>

このような埋め込みタグを大量に配置するとページが非常に重たくなり実用的ではありません。
そこでこのタグの場合ですと「U-42Fcw5eFc」が動画の識別コードになっているようなので
それぞれの動画の識別コードをデータベースに入れていき、それぞれの動画にリンクを用意して
訪問者がクリックした動画のみを別フレームページで再生できるという形にしようとしました。

この識別コードを配列$resultsとして取得し、foreachで埋め込み動画を並べることはできたのですが
上記のようなことをするのにどういうスクリプトを書けば実現できるのかわかりません。
ゆくゆくはデータベース内の検索機能などをつけたいのでこのようなことをしたいのですが
どのようにすればよいかご教授お願いいたします。

投稿日時 - 2013-10-15 09:31:05

QNo.8306380

困ってます

質問者が選んだベストアンサー

クライアントサイドなのでPHPではなくJavaScriptで実装します。
以下ソースコードです(インデントが消されるので見にくいとは思いますが…)。
Chrome 1以上, Firefox 3.5以上, Safari 3.2以上, Opera 10以上, IE8以上で動作するはずです(querySelectorを実装しているかどうか)。
自由にカスタマイズして使ってください。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<ul>
<!--この部分をPHPのforeachで出力-->
<li><a href="#U-42Fcw5eFc" class="open-youtube">動画1</a></li>
<li><a href="#a4hcoYYSlXk" class="open-youtube">動画2</a></li>
<li><a href="#OMpvHCPN2Qo" class="open-youtube">動画3</a></li>
<!--end-->
</ul>
<iframe width="640" height="390" src="" frameborder="0" id="youtube-viewer" allowfullscreen></iframe>
<script>
var list = document.querySelectorAll("a.open-youtube");
for(var i = 0; i < list.length; i++){
var f = function(e){
if(e.preventDefault){
e.preventDefault();
}else{ //for IE
e.returnValue = false;
}
var target = event.target || event.srcElement;
console.log(target);
var hash = target.getAttribute("href");
var url = "http://www.youtube.com/embed/" + hash.substring(1);
document.getElementById("youtube-viewer").setAttribute("src", url);
return false;
};
if(document.addEventListener){
list[i].addEventListener("click", f);
}else{ //for IE
list[i].attachEvent("onclick", f);
}
}
</script>
</body>
</html>

投稿日時 - 2013-11-02 10:51:46

お礼

遅くなりまして申し訳ありません。
プログラムを詳細に書いていただき非常に助かりました。
どうもありがとうございました。

投稿日時 - 2013-11-26 17:06:15

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問