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

2007/01/07

■2007/01/06 [Wiiで見られるYouTubeサイト「Wii-Tube」、だいぶイイ感じになってきました。
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などの外部サービスに頼らずに動画貼り付けをすることができます。
サイト作成に凝っている方はぜひいろいろ試してみてはいかがでしょうか。


2007/01/07 [updated : 2007/01/07 23:59]


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




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

トップに戻る

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


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

はてなブックマークで
コメントしましょう
kazz7 2007/01/08
コレなら出来そう。でも見せるようなコンテンツは無い。
kamisa 2007/01/08
メモメモ。ちょこっとやってみようかしらん。
koyhoge 2007/01/08
.flvの作り方とCCライセンスのflvプレイヤー。
shokai 2007/01/08
Riva FLV Encoder 2.0
wacky 2007/01/08
FLVファイルを自作して自分のWebサイトで再生できるようにする手順。
geeorge 2007/01/09
flash movie
tyki 2007/01/09
フリーソフトだけで実現する方法
kakei 2007/01/09
オリジナルのタイトルに戻してみます。
YasSo 2007/01/09
Flashがなくても、フリーソフトだけでflvを作ってWebページ内に貼り付けられる。
miyanavi 2007/01/09
FLASH VIDEO PLAYER 3.2 バージョンアップが続いてる・・・ ライセンスが気になるところ、CCはよくわからん。特に国別周り。
nilab 2007/01/09
自分のページにお手製の Flash Movie (FLV) を貼り付ける方法:FLASH VIDEO PLAYERでFLVファイルを作って, FLASH VIDEO PLAYERでウェブページ上で再生
hiro_y 2007/01/09
動画をFLV形式に変換、自分のサイトに掲載する方法。
nsta 2007/01/09
YouTubeみたいなものを自分のWebサイトだけで実現する
romans12 2007/01/10
これ行けそうじゃないですか!ついにRealともオサラバかな。
hamasta 2007/01/10
flvを作成してアップする
connolly 2007/02/16
最近のトレンド、動画をYoutubeライクに貼り付ける/Winは大体行けるがMacOS9+IEはダメっぽい
hihi01 2007/02/19
早速試してみよっと。
atove 2007/02/21
.flvをWebサーバから配信
kagawa3 2007/03/06
「Riva FLV Encoder 2.0」「FLASH VIDEO PLAYER 3.2」
uemu 2007/03/09
しごと
s-e-i 2007/05/04
ほほう
mutumin99 2007/07/21
プレイヤーの紹介もあり。
miyamotsu38 2007/08/16
ひとりyoutube作成tips
gregminster 2007/09/30
ひとりYouTube
mikkun-anego 2008/06/22
自前のFLVファイルをブログやサイトに貼り付ける方法
webmarksjp 2008/07/14
サイト管理
pandamark 2009/09/12
FLVをhtmlに組み込む
はてなブックマークで
コメントしましょう


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.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

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



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