お手製FLV動画の貼り付けでpreview画像を表示する方法

2007/02/16

■2007/01/07 [自分のページにお手製の Flash Movie (FLV) を貼り付ける方法
自分のページにお手製の Flash Movie (FLV) を貼り付ける方法]
 
という記事で味を占めた私は、以後のブログ記事で要所要所にFLV動画を
挟むようになりました。
 
 100行の文字より30秒の動画がモノを言う場面
 
というのはやっぱりあるもので、この表現力を活かさない手はありません。
ところが、ツッコミ厳しいことで有名な(?)Garbagenews のfuwaさんから
またもツッコミを頂きました。
 
■2007/02/14 [Wiiの「みんなで投票チャンネル」 - コミカルなMiiキャラクターで投票
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",majorversion:"7",build:"0",bgcolor:"#FFFFFF", allowfullscreen:"true", flashvars:"file=/review/blog/temp/wii_touhyou_3.flv&image=/review/blog/images/wii_touhyou_3_flvimage.jpg" };UFO.create( FO, "wii_touhyou_3");
--></script>
<br clear=all />
 
以前と全然貼り付け方が違うじゃないか! というご意見はごもっともですが、
これで晴れてIEでもFireFoxでもOperaでもプレビュー画像が表示されます。
 
過去にご紹介した動画の中からいくつかピックアップして、
このFLV動画+プレビュー画像のやり方にしてみましょう。

なお、この「id=」で示される「一意の識別子」の部分ですが、
今回の貼り付け方では、ただの飾りではなく、最後のcreate関数で
「指定されたidのタグをDHTMLで書き換える」 という動きをするために、
ちょっと慎重な扱いが必要です。同じページに同じidが2つあると
おかしな動作をしますので、たとえ同じ動画を貼り付けるときも、
idだけはちょこっと変えておくようにしましょう。
 
 
これで更にYouTubeっぽくなって(?)、動画貼り付けが使いやすくなりました、
みなさまもいろいろチャレンジしてみてください ヽ(´ー`)ノ


2007/02/16 [updated : 2007/02/16 23:59]


この記事を書いたのは・・・。
CK@デジモノに埋もれる日々 @ckom
ブログ「デジモノに埋もれる日々」「アニメレーダー」「コミックダッシュ!」管理人。デジモノ、アニメ、ゲーム等の雑多な情報をツイートします。




« あまとも通信 - アフィリエイト用タグ発行にようやくHTML版が登場

トップに戻る

【重要】あまともアフィリエイトタグHTML版のバグ修正について »


▼ はてなブックマークのコメント ▼

mutumin99 2007/07/21
表題の通り。
okeke1101 2007/09/26
flvファイルを再生
gregminster 2007/09/30
ひとりYouTube
はてなブックマークで
コメントしましょう


2024年のご挨拶


全力Vの1年:2023年振り返り~2023年も大変お世話になりました。2024年も宜しくお願いいたします。


2023年あけましておめでとうございます。デジモノに埋もれる様子をお届けできない日々


"V"にハマった1年:2022年振り返り~2022年も大変お世話になりました。2023年も宜しくお願いいたします。


(状況のご報告)Twitterアカウントの状況について ※2022.11.08追記あり


連投メモ:「ツイートで『ブログ』を書く」お話と、ガジェット系からイベントレポ系に遷移していった時のお話


2022年あけましておめでとうございます。よろず話はカーナビの「ジャイロ」ご乱心のお話


2021年も大変お世話になりました。2022年も宜しくお願いいたします。


2021年あけましておめでとうございます。よろず話はレンタカーと「一脚」テスト。


2020年も大変お世話になりました。2021年も宜しくお願いいたします。


2020年あけましておめでとうございます。今年はちゃんと歯を磨きます。。。


2019年も大変お世話になりました。2020年も宜しくお願いいたします。

ピックアップタグ




ブログ内検索



▼ コメント ▼

No.7118   投稿者 : 不破雷蔵   2007年2月17日 20:51

ツッコミ厳しい不破雷蔵です(w 今ちょいと身の回りがどたばたしてるので、後ほど改めて検証と導入をさせていただきます……というかこちらでも色々と調査してたんだけど、全部無意味になっちゃったな┐(´д`)┌ ヤレヤレ でもこちらの方がはるかによいから無問題!!

ところで。「貼り付け例」のHTMLコード、「プレビュー画像ファイルのパス」付近が欠損しているような気がするのですが……気のせい??


No.9493   投稿者 : kimi7ch   2007年5月 4日 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年7月 4日 17:34

こちらでも紹介されているflvplayer.swfが今では3.99になっており、全然分からんと嘆いていた折、こちらのページ(と前のページ)がとても役に立ったので、感謝のコメント。
要はscriptタグの前のPタグのところも一緒に記述しなければならなかった。英語の取説だと飛ばし飛ばし読んでしまうからなあ、反省。
ちなみに、レン鯖とか自宅鯖とかだと.htaccessに「AddType video/x-flv .flv」しないと読んでくれないかもという情報を書き加えつつ。


No.18614   投稿者 : ドミノ   2008年4月22日 07:09

はじめまして
FLV貼り付け方法の記事は非常に参考になりました

今度はぜひMP4の貼り付け方を
記事にして欲しいです


No.18615   投稿者 : ドミノ   2008年4月22日 07:10

はじめまして
FLV貼り付け方法の記事は非常に参考になりました

今度はぜひMP4の貼り付け方を
記事にして欲しいです


No.23137   投稿者 : *ほお*   2008年8月14日 17:31

二度目のコメントになります。
[自分のページにお手製の Flash Movie (FLV) を貼り付ける方法]でプレビュー画像が貼れましたと感謝のコメントをさせていただきました。

その後、いろいろ自己流で(といってもIE利用者ですのでその範疇が限界ですが)楽しんでます。

今では、コントロール・バーの色を変えたり、XMLファイルでリスト形式のビデオを作ったりしています。
またブログでは自己流JavaScriptで色々なバリエーションを楽しんでいます。

あ、それから自作のロゴマークも表示しています。
是非、http://blog.follyboy.jp/を除いて見てください。

で、汚いソースですが覗いていただいて、興味があればお持ち帰りください。
ただし、自己責任で願います。(笑)



★コミックダッシュ! 10,000人突破ありがとうキャンペーン!(9/18~10/23)
 
デジモノに埋もれる日々 : (C) CKWorks