Amazon商品の価格変動チェック「あまとも」
コミックダッシュ!は初音ミクGTプロジェクトを応援しています
個人ニュースサイトを巡回する「メガとんトラック」
全ての記事 携プレMP3 デジカメ レコーダ ゲーム メモリ デジモノ コラム 雑談 ブログ あまとも コミックダッシュ!
前の記事次の記事
2007/01/07 23:59 - 2007/01/07

自分のページにお手製の Flash Movie (FLV) を貼り付ける方法

カテゴリ : ブログ タグ :

    ■2007/01/06 [Wiiで見られるYouTubeサイト「Wii-Tube」、だいぶイイ感じになってきました。]
     
    昨日の Wii-Tube の記事で、こんなコメントを頂きました。
    投稿者 : 不破雷蔵   2007年01月08日 09:48
    ところで記事に貼り付けてある動画、Youtubeとかじゃなくて直接サーバ内から
    引っ張ってきてるみたいですけど、これって管理人さんが自ら動画ファイルを
    Flash化したんすよね? どういうツール使うんですか? 気になるっす。

    はい、おっしゃるとおりです。最近Wii-Tubeをガリガリ作っていることもあって、
    今まで興味の無かった Flash Movie (FLV) 周りの情報が急激に
    頭になだれ込んできています。これもそうした中の産物です。
     
    ご自身でWebサイトを運営されている方、ブログオーナーなどもそうですが、
    動画を貼り付けたいと思ったときに、「YouTube にアップしてから貼り付ける」
    というやり方に違和感を感じる方も多いでしょう。権利云々はさて置くとしても、
     
    「どう見ても 自分だけしか使わない 動画なのに、わざわざYouTubeなんて」
     
    とか思ってYouTube側のリソースを気にしてあげたり、
     
    「YouTubeの 混雑状況に左右されて 快適に再生できなかったりするし」
     
    と、逆にYouTubeの環境を不満に思ったり、いずれにせよ、画像などは全部自分の
    Web領域にアップしているのに、動画だけは他サービスと一蓮托生、というのは
    何か腑に落ちない方も多いと思います。とすると、自分のWeb領域上で、
     
     「ひとりYouTube」みたいなことができれば
     
    問題は解決するワケです。もちろんYouTubeのように快適なUIを望むのは
    無理ですが、自分で Flash Movie を作って、それを自分のページに
    貼り付けるのはさほど難しくありません。手順はこんな感じです。
     
     
    1、FLVファイルを作る
     
    フリーのFLVファイル作成ソフトには 「Riva FLV Encoder 2.0」 があります。
     
    ■Riva - http://www.rivavx.com/
     
    メニューの「Downloads」から「Free Riva FLV Encoder 2.0」の項を見ると、
    ダウンロードは c-net の download.com から行うようになっています。
    ジャンプした先のページで「Download Now」をクリックして保存し、
    その RivaEncoderSetup.exe でインストールしましょう。
     
    インストールが済んだら実際に Riva FLV Encoder 2.0 を起動します。
     
    クリックすると拡大画像を表示します。
    左側にInputファイル、Outputファイルを指定する欄があります。
    「Browse」を押してエンコードしたいInputファイルを指定しましょう。
     
    右側の「Video」という欄は、エンコード設定です。縦横サイズ、フレームレート、
    ビットレートなどが指定できます。ブログなどで小さく貼り付けるのが目的なら、
    縦横サイズは小さくしてしまっても構いません。同じビットレートであれば当然、
    縦横サイズが小さいほうが画質は向上します。
    私はビットレートをデフォルトの360Kbpsのままにして、縦横サイズをデフォルト
    の640×480ではなく 320×240 指定にすることで画質を向上させています。
     
    設定が済んだら「Encode」ボタンを押すとエンコードが始まります。
    これでFLVファイルの作成は完了です。
     
     
    2、FLVをページに貼り付ける
     
    FLVファイルはあくまで Flash Movie データで、実際にページに貼り付けて
    再生できるようにするには、FLASH型のプレイヤーがなければなりません。
    そんなFLASH型のプレイヤーに 「FLASH VIDEO PLAYER 3.2」 があります。
     
    ■FLASH VIDEO PLAYER 3.2
    http://www.jeroenwijering.com/?item=Flash_Video_Player
     
    こちらにあるFLASH側のプレイヤーをダウンロードして使います。
    flash_flv_player.zip というファイルにいろいろ詰まっていますが、
    その中で使うのは flvplayer.swf というファイル1つだけです。
    これを自分のWeb領域上のどこかに置いておきます。
     
    そして先ほど作成したFLVファイルをこの flvplayer.swf で再生できるように
    ページには object, embed タグを貼り付けていきます。こんな感じです。
     
    □書き方
    <object id=""(一意の識別子)" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="(横px)" height="(縦px)">
    <param name="movie" value="(flvplayer.swfのパス)?file=(FLVファイルのパス)">
    <param name="wmode" value="transparent">
    <embed name="(一意の識別子)" src="(flvplayer.swfのパス)?file=(FLVファイルのパス)" width="(横px)" height="(縦px)" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
    </embed>
    </object>
     
    □貼り付け例
    <object id="wiitube_refine" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="320" height="260">
    <param name="movie" value="/flash/flvplayer.swf?file=/review/blog/temp/wiitube_refine.flv">
    <param name="wmode" value="transparent">
    <embed name="wiitube_refine" src="/flash/flvplayer.swf?file=/review/blog/temp/wiitube_refine.flv" width="320" height="260" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
    </embed>
    </object>
     
    これだけです、意外と簡単ですね ヽ(´ー`)ノ
     
    プレイヤーがFLASH(swf)ですので、cgi領域すら使いません。
    「ホームページサービス」を使っているだけの方でも普通に使えます。
     
     
    使い方の一例として、
    前回の記事でも示した「操作中の画面の公開」というのがあります。
     
    ■Wii-TubeをWiiから操作している画面
     

     
    「○○を△△して次に××を・・・」といったような説明は、
    文字よりも動画のほうがはるかにわかりやすいものです。
     
     
    ほかにも、たとえば、こんなことをやってみましょう。
     
    ■我が家のワンちゃん動画
     

     
    こんなのをブログにアップするだけのために、いきなりYouTubeにアップロード
    というのも気が引けますが、自分のWeb領域であれば気になりません。
     
     
    ほかにも、こんなのはどうでしょうか。
     
    ■「BLACK LAGOON」のDVDがオススメ!
     

    CM動画というのは本来はグレー(というか黒)ですが、本編の販売を促進するような
    貼り方であれば多少は甘めに見てもらえるかもしれません・・(もちろん本編の内容を
    うかつに貼ったりすれば、それは相応のリスクを覚悟する必要があります)。
     
     
    このように使い方は色々ですが、FLVファイルを自分で作って貼り付ければ、
    YouTubeなどの外部サービスに頼らずに動画貼り付けをすることができます。
    サイト作成に凝っている方はぜひいろいろ試してみてはいかがでしょうか。

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



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


    « Wiiで見られるYouTubeサイト「Wii-Tube」、だいぶイイ感じになってきました。

    トップに戻る

    成功は振り返って語るもの - 「PS3が圧勝した世界」という思考実験 »



    ▼ コメント ▼

    No.6143   投稿者 : 不破雷蔵   2007年1月 8日 22:16

    うほっ。いい記事。……というようなお茶らけた話じゃなくて。すっげー嬉しいです!ここ一年ほど「デジタルビデオカメラ買ったら色々やってみたいな。でもmovieファイルそのまま上げるの重たいよなYoutubeではflash化してアップしてるんだから個人ベースでもできないことないよなでもどうやるんだかわかんないなトホホ」と思ってた疑問が一挙に解決しました! ありがとうございますっ。これから時間はかかるでしょうけど(まず道具の調達だ_| ̄|○)少しずつ修練していくつもりです。

    he.cgiの件といい、本当に助かります。ありがとうございました(゚◇゚)


    No.6505   投稿者 : 不破雷蔵   2007年1月22日 21:57

    ……というわけでトラバにもあるように自分のところでも検証させていただきました。うまくできました(゚◇゚)ノ ありがとうございました★ あとは、Youtubeのように「静止画状態の時にブラック画面ではなくて動画中の一シーン(か任意の静止画)を入れることができないか」という問題ですね。これが可能なら、例えば「クリックして動画を見てくださいね」というメッセージも入れられるんですが(まぁキャプションテキストを掲載すればいいんですけど、それにしても黒画面はちょっと寂しい)。


    No.6926   投稿者 : あちゃまる   2007年2月13日 11:40

    ほんといい記事みつけましたー!
    さっそく自分のHPに動画を載せて楽しんでます。
    だけど・・・
    ひとつ気になる点が・・・
    .flvにした動画をサーバーにアップする2日後には消えてしまいます。
    プレーヤーは残っていますが、アップした.flvのファイルだけ・・・
    なんでなんでしょぅ?
    毎回アップしなくちゃいけないのが面倒です。
    知っておられる方いないでしょうか?


    No.8032   投稿者 : さとしょー   2007年3月13日 16:09

    ずばり知りたい事でした。
    ありがとうございました。


    No.8274   投稿者 : もくを   2007年3月18日 11:28

    Riva FLV Encoderを使って自分のHPに↑のような動画を無事に設置できて、
    もう一度やってみようとしたら、encoding failed と出てきて全然できませんでした。
    動画の形式もいろいろ変えてやってみたのですが全く進展はありませんでした。
    解決策を教えてください
    お願いします。


    No.8527   投稿者 : d   2007年3月31日 10:58

    (FLVファイルのパス)はどのように入力したらいいかわかりません


    No.8528   投稿者 : d   2007年3月31日 10:59

    (FLVファイルのパス)はどのように入力したらいいかわかりません


    No.8529   投稿者 : d   2007年3月31日 11:04

    場所はマイドキュメントにあります。
    連投すいません


    No.8584   投稿者 : あんこ   2007年4月 4日 13:49

    前からやりたかったのですがやり方がイマイチわからず…。
    このサイトを見てあっさりできました!
    本当に助かりました、ありがとうございます


    No.8649   投稿者 : b   2007年4月 7日 15:16

    Σ(゚Д゚;エーッ!・・・・
    わからないの俺だけ?


    No.9287   投稿者 : くあ   2007年4月24日 11:00

    >投稿者:bさん

    flvplayer.swfのあるディレクトリからの相対パスのようですよ。

    /home/myname/index.html
    /home/myname/flvplayer.swf
    /home/myname/movie/hoge001.flv
    /home/myname/movie/hoge002.flv

    このようなディレクトリで、index.html内で動画を使いたい場合は、
    src="flvplayer.swf?file=movie/hoge001.flv"
    という感じです。


    No.12078   投稿者 : まにゅ   2007年7月19日 14:17

    file= のところは URL でもいけました。
    src="flvplayer.swf?file=http://hogehoge.com/movie/hoge001.flv"
    みたいに。


    No.17046   投稿者 : *ほお*   2007年12月 9日 17:17

    付属のJSファイルとJPG画像を用意すると、黒画面も解消できましたよ。


    No.17640   投稿者 : K   2008年1月10日 21:21

    すばらしいっす!
    参考にさせて頂きます(^0^)/


    No.17912   投稿者 : ら   2008年2月10日 00:09

    初心者です・・・。
    flvplayer.swfがどこにあるのか分からないのですが、教えてください。


    No.17913   投稿者 : ら   2008年2月10日 00:10

    初心者です・・・。
    flvplayer.swfがどこにあるのか分からないのですが、教えてください。


    No.18013   投稿者 : p   2008年3月 2日 03:39

    ら さん

    http://wasabi01.hp.infoseek.co.jp/flash/index.html

    コレをご参考に(どうやらファイル名が変わったようですよ。


    No.19536   投稿者 : みとこん   2008年5月30日 11:31

    参考にさせていただきました!ありがとうございます!!


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


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


    ▼ トラックバック ▼

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

    このリストは、次のエントリーを参照しています: 自分のページにお手製の Flash Movie (FLV) を貼り付ける方法:

    トラックバック時刻: 2007年1月21日 14:38

    » 制作記……Youtubeが出来るなら自分にも!・動画ファイルをFlash化して自分のサイトに貼り付ける from Garbagenews.com
    当サイトでも何度と紹介している動画投稿サイト【Youtube】のスゴいところは、投稿された動画をFlash化してタグとして提供し、ブログパーツとして使える点にあ... [続きを読む]

    トラックバック時刻: 2007年4月26日 08:20

    » ブログに自前FLVを貼り付ける為の from さげろぐ(sagelog)
    自動ソース生成ツールを作ってみた ワシはプログラマでも何でもなく素人なんでこんなもん晒すのも恥ずかしいし 需要も激しく低そうなわけだが やってることはファ... [続きを読む]

    トラックバック時刻: 2007年7月19日 16:43

    » tdiary で動画を載せる from Manu-'s diary
    昨日はいろいろ試したw 最初にMP4にしてみたが、必ずしもQTがあるわけじゃないしなぁと。WMVだと窓だけになっちゃいそうだし。FLVが再生できリャいい... [続きを読む]

    トラックバック時刻: 2007年10月27日 03:49

    » XHTML from キャプテンアリスの>w<
    ここで使ってるブログエンジンはPHP+MySQLで運用されており、W3C勧告に準拠したXHTMLを出力してくれる優れもの。ブラウザ、プラットフォーム毎に挙... [続きを読む]

    トラックバック時刻: 2008年9月18日 00:10

    » [備忘]動画ファイル→自力youtube(?)化 from ぽちぽちぼちぼち。
    youtube化というか、プラグインやプレーヤー無しでもみられるFlash Vi... [続きを読む]

    トラックバック時刻: 2009年1月12日 00:32

    » 中小企業憲章ビデオの学習動画ビデオ作成 from オープンソースが好き
    中小企業憲章 学習ビデオ... [続きを読む]

    トラックバック時刻: 2009年2月23日 13:11

    » 【電脳】CORESERVERコアサーバー15GBで月額500円と最安? from 三国志★中年の覇者[三国無双][一騎当千][中原の覇者][電脳地獄]
    当サイトも動画を充実させていこうと思っているのですが、動画ってやつはかなりの容量... [続きを読む]

    トラックバック時刻: 2010年2月25日 18:42

    » HTML from Pukiwiki Plus! (PukiWiki/TrackBack 0.3)
    [続きを読む]

    トラックバック時刻: 2010年9月15日 10:40

    » 【IT】【備忘録】JW Players – FLASH型FLVプレイヤー from Telmina 3rd
     本日、本来であればダレットブログリニューアルについて触れる予定でしたが、諸般の事情1 により、予定を変更します。  自分のサイトに、自前の Flash ... [続きを読む]

    トラックバック時刻: 2012年2月10日 15:04

    » JW Player 5 from 趣味のページ
    自前でFLVプレイヤー作るのが面倒だったので、 JW Playerというものを拝借しました。 2012年2月の現在ですが、 仕様が変更されたのか... [続きを読む]

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