締切済み

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

2009/12/18 14:54

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_buttons/get_flash_player.gif" alt="Adobe Flash Player を取得" /></a></p> </div>  </object>  </object> どなたかご教授いただけないでしょうか？よろしくお願いいたします。

gramka
お礼率0% (0/1)

JavaScript
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

みんなの回答

yyr446
ベストアンサー率65% (870/1330)

2009/12/18 20:46 回答No.1

"FLVPlayer_Progressive.swf"ってプレーヤーはDreamweaver 買わないと入手できないので（本当？）試せませんが、下のように、すればよいかと ※サンプルはただで入手できる「JW flv Players」を使ってます。 http://www.longtailvideo.com/players/jw-flv-player/ ※ほとんど工夫していないシンプルなおき方の例サムネイルをクリックしてプレーヤーと「閉じるボタン」を表示し、サムネイルを非表示にして再生開始、「閉じるボタン」で再生停止し、プレーヤーと「閉じるボタン」を非表示にし、サムネイルを再表示です。 <?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.dtd"> <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