 « あまとも通信 - アフィリエイト用タグ発行にようやくHTML版が登場 |  トップに戻る |  【重要】あまともアフィリエイトタグHTML版のバグ修正について » |
2007年02月16日
お手製FLV動画の貼り付けでpreview画像を表示する方法 
■2007/01/07 [自分のページにお手製の Flash Movie (FLV) を貼り付ける方法]
という記事で味を占めた私は、以後のブログ記事で要所要所にFLV動画を
挟むようになりました。
100行の文字より30秒の動画がモノを言う場面
というのはやっぱりあるもので、この表現力を活かさない手はありません。
ところが、ツッコミ厳しいことで有名な（？）Garbagenews のfuwaさんから
またもツッコミを頂きました。
■2007/02/14 [Wiiの「みんなで投票チャンネル」 - コミカルなMiiキャラクターで投票]
初期表示の段階を真っ暗じゃなくて、例えば
その動画の1カット目とか任意の静止画で表示する
ことって出来なんでしょうかね……? 5つの動画部分が
最初は全部真っ暗というのがちょっと寂しい。
そうですよね。そうですよね。
今までの貼り付け方だと、黒い四角に再生ボタンがポツンと表示されるだけで、
再生ボタンを押して見るまでは何の動画だかさっぱり判りません。何の動画だか
わからないから、逆に再生する気が起きない、という悪循環も起こります。
やっぱり再生する前の時点でプレビュー画像が必要です。
そう思ってFlash Video Playerのサイトで再度確認してみると、
■FLASH VIDEO PLAYER 3.5
http://www.jeroenwijering.com/?item=Flash_Video_Player
あ、バージョンが3.2⇒3.5に大幅アップしている(;゜д゜)
・・・それはさておき。
最新版をダウンロードしてきて、中のReadmeを読んでみると、
今まで
value="/flash/flvplayer.swf?file=********.flv
としていた箇所を、
value="/flash/flvplayer.swf?file=********.flv&image=*********.jpg
のように「image=」のパラメータを加えれば再生前に静止画を表示できる
と書いてありました。しかしコレ、実際に試してみると、FireFoxでは
うまくいくものの、IEだとパラメータエラーになるのか、動画が全く
表示されなくなるという本末転倒な結果に陥ります orz
そこで注意深くサンプルを見てみると、IEでもプレビュー画像を表示するために
object/embedでの貼り付けではなく、もうちょっと手の込んだjavascriptコードを
使った例が示されていました。その手順をご紹介しましょう。
まず、flash_flv_player.zip をダウンロードしてきます。その中の
flvplayer.swf をWeb領域上の適当な場所に置いておくのは今までどおりですが、
それと一緒に ufo.js というjavascriptファイルも
一緒にWeb領域のどこかに置いておきます。
動画を表示したいページでは、まずこの ufo.js を読み込みます。
<script type="text/javascript" src="/flash/ufo.js"></script>
私の場合はブログの全ページで使う可能性があるので、MTのテンプレートを
編集して、各ページの <head>～</head> の中に入れてしまいました。
続いて以下のようなコードで.flvを貼り付けます。
■書き方
<p id="(一意の識別子)"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript"><!--//
var FO ={movie:"(flvplayer.swfのパス)",width:"(横px)",height:"(縦px)",majorversion:"7",build:"0",bgcolor:"#FFFFFF", allowfullscreen:"true", flashvars:"file=(FLVファイルのパス)&image=(プレビュー画像ファイルのパス)" };UFO.create( FO, "(一意の識別子)");
--></script>
<br clear=all />
■貼り付け例
<p id="wii_touhyou_3"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript"><!--//
var FO ={movie:"/flash/flvplayer.swf",width:"320",height:"260",
--></script>
<br clear=all />
以前と全然貼り付け方が違うじゃないか！ というご意見はごもっともですが、
これで晴れてIEでもFireFoxでもOperaでもプレビュー画像が表示されます。
過去にご紹介した動画の中からいくつかピックアップして、
このFLV動画＋プレビュー画像のやり方にしてみましょう。
Get the Flash Player to see this player.
Get the Flash Player to see this player.
Get the Flash Player to see this player.
なお、この「id=」で示される「一意の識別子」の部分ですが、
今回の貼り付け方では、ただの飾りではなく、最後のcreate関数で
「指定されたidのタグをDHTMLで書き換える」 という動きをするために、
ちょっと慎重な扱いが必要です。同じページに同じidが2つあると
おかしな動作をしますので、たとえ同じ動画を貼り付けるときも、
idだけはちょこっと変えておくようにしましょう。
これで更にYouTubeっぽくなって（？）、動画貼り付けが使いやすくなりました、
みなさまもいろいろチャレンジしてみてください ヽ(´ー`)ノ
投稿者 CK : 2007年02月16日 23:59 | ブログ
« あまとも通信 - アフィリエイト用タグ発行にようやくHTML版が登場 | トップに戻る | 【重要】あまともアフィリエイトタグHTML版のバグ修正について » |
▼ はてなブックマークのコメント ▼
▼ コメント ▼
No.7118 投稿者 : 不破雷蔵 2007年02月17日 20:51
ツッコミ厳しい不破雷蔵です(w 今ちょいと身の回りがどたばたしてるので、後ほど改めて検証と導入をさせていただきます……というかこちらでも色々と調査してたんだけど、全部無意味になっちゃったな┐(´д｀)┌ ﾔﾚﾔﾚ でもこちらの方がはるかによいから無問題!!
ところで。「貼り付け例」のHTMLコード、「プレビュー画像ファイルのパス」付近が欠損しているような気がするのですが……気のせい??
No.9493 投稿者 : kimi7ch 2007年05月04日 11:02
ufo.js というjavascriptファイルは白紙でいいのですか?
"file=/review/blog/temp/wii_touhyou_3.flv&image=/review/blog/images/wii_touhyou_3_flvimage.jpg" ですが /images/ のディレクトリはFLVファイルのパスとは別に用意しなければならないのでしょうか?
それからwii_touhyou_3.flv と wii_touhyou_3_flvimage.jpg の書き方の違いの意味は定形フオームなのでしょうか?
以上三点、質問多いなぁ すみません。
No.11552 投稿者 : うらうらら 2007年07月04日 17:34
こちらでも紹介されているflvplayer.swfが今では3.99になっており、全然分からんと嘆いていた折、こちらのページ（と前のページ）がとても役に立ったので、感謝のコメント。
要はscriptタグの前のPタグのところも一緒に記述しなければならなかった。英語の取説だと飛ばし飛ばし読んでしまうからなあ、反省。
ちなみに、レン鯖とか自宅鯖とかだと.htaccessに「AddType video/x-flv .flv」しないと読んでくれないかもという情報を書き加えつつ。
No.18614 投稿者 : ドミノ 2008年04月22日 07:09
はじめまして
FLV貼り付け方法の記事は非常に参考になりました
今度はぜひMP4の貼り付け方を
記事にして欲しいです
No.18615 投稿者 : ドミノ 2008年04月22日 07:10
はじめまして
FLV貼り付け方法の記事は非常に参考になりました
今度はぜひMP4の貼り付け方を
記事にして欲しいです
No.23137 投稿者 : *ほお* 2008年08月14日 17:31
二度目のコメントになります。
[自分のページにお手製の Flash Movie (FLV) を貼り付ける方法]でプレビュー画像が貼れましたと感謝のコメントをさせていただきました。
その後、いろいろ自己流で（といってもＩＥ利用者ですのでその範疇が限界ですが）楽しんでます。
今では、コントロール・バーの色を変えたり、ＸＭＬファイルでリスト形式のビデオを作ったりしています。
またブログでは自己流JavaScriptで色々なバリエーションを楽しんでいます。
あ、それから自作のロゴマークも表示しています。
是非、http://blog.follyboy.jp/を除いて見てください。
で、汚いソースですが覗いていただいて、興味があればお持ち帰りください。
ただし、自己責任で願います。（笑）
ご自由にコメントください(＝゜ω゜)ノ
※管理人は多忙のためお返事はほとんどできません（スミマセン）。スパムおよび本文と無関係なコメントは削除対象になる可能性があります。
▼ トラックバック ▼
このエントリーのトラックバックURL:
