お手製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",
--></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]
ブログ「デジモノに埋もれる日々」「アニメレーダー」「コミックダッシュ!」管理人。デジモノ、アニメ、ゲーム等の雑多な情報をツイートします。
@ckom をフォローする
« あまとも通信 - アフィリエイト用タグ発行にようやくHTML版が登場 | トップに戻る | 【重要】あまともアフィリエイトタグHTML版のバグ修正について » |
▼ はてなブックマークのコメント ▼
関連記事
ピックアップタグ
- アニメ(440)
- GSR(317)
- ライブ(79)
- イベント(207)
- コラボカフェ(35)
- VTuber(24)
- アニメ吐き出しメモ(10)
- ウマ娘(50)
- 舞台挨拶(45)
- 先行上映会(19)
- トークショー(20)
- バンドリ!(51)
- ガールズ&パンツァー(59)
- 少女☆歌劇レヴュースタァライト(60)
- ゾンビランドサガ(9)
- プリンセス・プリンシパル(19)
- スタリラ(31)
- コラム(171)
- ゲームプレイ日記(69)
- ワンフェス(13)
- コメンタリー上映(7)
- 岩浪美和(25)
- 大洗(9)
- 響け!ユーフォニアム(12)
- リズと青い鳥(9)
- RAISE A SUILEN(10)
- 艦これ(23)
- ストライクウィッチーズ(23)
- メイドインアビス(8)
- BLAME!(8)
- ヤマノススメ(7)
- ラブライブ!サンシャイン!!(11)
- HELLO WORLD(6)
- 宇宙よりも遠い場所(5)
- ヴァイオレット・エヴァーガーデン(8)
- 私に天使が舞い降りた!(9)
ブログ内検索
▼ コメント ▼
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/を除いて見てください。
で、汚いソースですが覗いていただいて、興味があればお持ち帰りください。
ただし、自己責任で願います。(笑)
表題の通り。
flvファイルを再生
ひとりYouTube
コメントしましょう