Amazon商品の価格変動チェック「あまとも」
コミックダッシュ!は初音ミクGTプロジェクトを応援しています
個人ニュースサイトを巡回する「メガとんトラック」
全ての記事 携プレMP3 デジカメ レコーダ ゲーム メモリ デジモノ コラム 雑談 ブログ あまとも コミックダッシュ!
前の記事次の記事
2007/02/16 23:59 - 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",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動画+プレビュー画像のやり方にしてみましょう。

    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@デジモノに埋もれる日々 @ckom
    ブログ「デジモノに埋もれる日々」「アニメレーダー」「コミックダッシュ!」管理人。デジモノ、アニメ、ゲーム等の雑多な情報をツイートします。



    投稿者 CK : 記事URL | ブログ | | 2007/02/16 23:59


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

    トップに戻る

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



    ▼ コメント ▼

    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/を除いて見てください。

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


    ご自由にコメントください(=゜ω゜)ノ  ▼ コメント入力欄を開く ▼
    ※管理人は多忙のためお返事はほとんどできません(スミマセン)。
    スパムおよび本文と無関係なコメントは削除対象になる可能性があります。


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


    ▼ トラックバック ▼

    このエントリーのトラックバックURL:

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