埋め込みswfのサムネイル画像表示方法

締切済

質問者：gramka
質問日時：2009/12/18 14:54
回答数：1件

JavaScriptの知識は殆どないのですが、実現するにはJavaScriptが必要そうだという憶測で質問させていただきます。

サイト上にflv動画を置いているのですが、これにサムネイル画像をつけたいのです。
画像は切り出して作成済みです。

ちなみに、現在は下記のコードを使用しています。
動画ファイルはの場所は、相対パスですと　./video/test.flv
サムネイル画像も同じ場所に用意しました。 ./video/test.jpg

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=video/test&autoPlay=false&autoRewind=true" />
<param name="swfversion" value="8,0,0,0" />

<param name="expressinstall" value="Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="320" height="240">

<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=video/test&autoPlay=false&autoRewind=true" />
<param name="swfversion" value="8,0,0,0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />

<div>
<h4>このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_butt … alt="Adobe Flash Player を取得" /></a></p>
</div>

</object>

</object>

どなたかご教授いただけないでしょうか？
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： yyr446
回答日時：2009/12/18 20:46

"FLVPlayer_Progressive.swf"ってプレーヤーはDreamweaver 買わないと

入手できないので（本当？）試せませんが、下のように、
すればよいかと
※サンプルはただで入手できる「JW flv Players」を使ってます。
http://www.longtailvideo.com/players/jw-flv-play …

※ほとんど工夫していないシンプルなおき方の例
サムネイルをクリックしてプレーヤーと「閉じるボタン」を表示し、
サムネイルを非表示にして再生開始、
「閉じるボタン」で再生停止し、プレーヤーと「閉じるボタン」を非表示
にし、サムネイルを再表示です。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<body>
<div>
<img src="./video/test.jpg" onclick="play(this);" style="display:inline;" alt="test.flvのサムネイル" />
<button onclick="stop(this);" style="display:none;">閉じる</button>
</div>
<div id="playarea" style="display:none;">
<object id="myplayer" name="myplayer" type="application/x-shockwave-flash" data="/jslib/jwplayer/player-viral.swf" width="320" height="240">
<param name="movie" value="/jslib/jwplayer/player-viral.swf" />
<param name="allowscriptaccess" value="always" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param id="flashvars" name="flashvars" value="file=./video/test.flv&image=./video/test.jpg&autostart=false" />
<param name="swfversion" value="8,0,0,0" />
</object>
</div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
var playarea = document.getElementById("playarea");
var player = document.getElementById("myplayer");
function play(this){
this.style.display='none';
this.parent.childNodes[1].style.display='block';
playareastyle.display='block';
player.sendEvent("PLAY","true");
}
function stop(this){
player.sendEvent("STOP","true");
this.style.display='none';
this.parent.childNodes[0].style.display='inline';
playareastyle.display='none';
}
//]]>
</script>
</body>
</html>

レイアウト的にも、機能的にももっと工夫の余地があります。
例えば、複数のサムネイルを左側にfloat:leftでリスティングし、
プレーヤーは横においといて、再生元ファイルを変えるとか、
プレーヤーを動的に作成・削除するとか、
プレーヤーをそれぞれのサムネールの横毎に作成・削除出来るように
するとか．．．．．

javascriptだけでコーディングすると疲れそう、
jQueryでも使いたい、おっとそもそも、このての動画ギャラリー
みたいなのは、すでにライブラリーがあるぞ、「shadowbox」だ。
作るのやーめた。
http://www.shadowbox-js.com/index.html