動画をWebサイトで再生する方法の一つにメディアプレイヤーを利用する方法があります。
メディアプレイヤーにもいろいろありますが、今回はオープンソースの有名どころでFlashで再生するStrobe Media Playback(※1)を利用します。
インストール、動作パラメータの設定等の細かい説明は、いろいろなブログ等で公開されているのでここでは省きます。m(..)m
さて、”見せ方を一工夫”ですが、タイトルにまでして実は大したことではありません。
（本当に） 普通は、そのまま貼り付けるとこんな感じです。
一工夫は、タイトルをクリックすると展開するようにしました。こうすることで、動画の一覧から見たい動画を選択できるようにした際、ちょっとすっきりします。
方法は、aタグをクリックしたしたら、aタグ要素の下にメディアプレイヤー用のオブジェクトを追加する、です。コーディング例は以下の通り。
[aタグの例]
<p><a onclick="fOpenMovie(this, '動画ファイル名');return false;" href="javascript:void(0);">桜のある風景（再生 00:07） </a></p>
[メディアプレイヤー用のオブジェクトを追加するjavascript 関数の例 fOpenMovie()]
function fOpenMovie(oPara,strURL){
// aタグのテキストを取得
var n=oPara.firstChild;
var aTagText ="";
while(n){
if(n.nodeName=="#text") aTagText = n.nodeValue;
n=n.nextSibling;
}
// objectタグの生成
var strValue = "src=" + encodeURIComponent(strURL);
var strObjectTag = String();
strObjectTag = "<span>" + aTagText + "</span><br />";
strObjectTag = strObjectTag
+ "<object width='470' height='320'>"
+ "<param name='movie' value='(swfのＵＲＬ) StrobeMediaPlayback.swf'></param>"
+ "<param name='flashvars' value='" + strValue + "'></param>"
+ "<param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param>"
+ "<param name='wmode' value='direct'></param>"
+ "<embed src=~(swfのＵＲＬ)StrobeMediaPlayback.swf' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' wmode='direct' width='470' height='320 flashvars="
+ "'" + strValue + "'></embed>"
+ "</object>";
// オブジェクトを追加する。
var oElements = oPara.parentNode;
oElements.innerHTML = strObjectTag;
return false;
}
※1 Strobe Media Playback ダウンロードサイト
http://sourceforge.net/projects/smp.adobe/files/
