 « Wiiで見られるYouTubeサイト「Wii-Tube」、だいぶイイ感じになってきました。 |  トップに戻る |  成功は振り返って語るもの - 「PS3が圧勝した世界」という思考実験 » |
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 を作って、それを自分のページに
貼り付けるのはさほど難しくありません。手順はこんな感じです。
１、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ファイルの作成は完了です。
２、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 : 2007年01月07日 23:59 | ブログ
« Wiiで見られるYouTubeサイト「Wii-Tube」、だいぶイイ感じになってきました。 | トップに戻る | 成功は振り返って語るもの - 「PS3が圧勝した世界」という思考実験 » |
▼ はてなブックマークのコメント ▼
▼ コメント ▼
No.6143 投稿者 : 不破雷蔵 2007年01月08日 22:16
うほっ。いい記事。……というようなお茶らけた話じゃなくて。すっげー嬉しいです!ここ一年ほど「デジタルビデオカメラ買ったら色々やってみたいな。でもmovieファイルそのまま上げるの重たいよなYoutubeではflash化してアップしてるんだから個人ベースでもできないことないよなでもどうやるんだかわかんないなトホホ」と思ってた疑問が一挙に解決しました! ありがとうございますっ。これから時間はかかるでしょうけど(まず道具の調達だ＿|￣|○)少しずつ修練していくつもりです。
he.cgiの件といい、本当に助かります。ありがとうございました(ﾟ◇ﾟ)
No.6505 投稿者 : 不破雷蔵 2007年01月22日 21:57
……というわけでトラバにもあるように自分のところでも検証させていただきました。うまくできました(ﾟ◇ﾟ)ﾉ ありがとうございました★ あとは、Youtubeのように「静止画状態の時にブラック画面ではなくて動画中の一シーン(か任意の静止画)を入れることができないか」という問題ですね。これが可能なら、例えば「クリックして動画を見てくださいね」というメッセージも入れられるんですが(まぁキャプションテキストを掲載すればいいんですけど、それにしても黒画面はちょっと寂しい)。
No.6926 投稿者 : あちゃまる 2007年02月13日 11:40
ほんといい記事みつけましたー！
さっそく自分のＨＰに動画を載せて楽しんでます。
だけど・・・
ひとつ気になる点が・・・
.flvにした動画をサーバーにアップする２日後には消えてしまいます。
プレーヤーは残っていますが、アップした.flvのファイルだけ・・・
なんでなんでしょぅ？
毎回アップしなくちゃいけないのが面倒です。
知っておられる方いないでしょうか？
No.8032 投稿者 : さとしょー 2007年03月13日 16:09
ずばり知りたい事でした。
ありがとうございました。
No.8274 投稿者 : もくを 2007年03月18日 11:28
Riva FLV Encoderを使って自分のHPに↑のような動画を無事に設置できて、
もう一度やってみようとしたら、encoding failed と出てきて全然できませんでした。
動画の形式もいろいろ変えてやってみたのですが全く進展はありませんでした。
解決策を教えてください
お願いします。
No.8527 投稿者 : ｄ 2007年03月31日 10:58
(FLVファイルのパス)はどのように入力したらいいかわかりません
No.8528 投稿者 : ｄ 2007年03月31日 10:59
(FLVファイルのパス)はどのように入力したらいいかわかりません
No.8529 投稿者 : ｄ 2007年03月31日 11:04
場所はマイドキュメントにあります。
連投すいません
No.8584 投稿者 : あんこ 2007年04月04日 13:49
前からやりたかったのですがやり方がイマイチわからず…。
このサイトを見てあっさりできました！
本当に助かりました、ありがとうございます
No.8649 投稿者 : ｂ 2007年04月07日 15:16
Σ(ﾟДﾟ；ｴｰｯ!・・・・
わからないの俺だけ？
No.9287 投稿者 : くあ 2007年04月24日 11:00
>投稿者：ｂさん
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年07月19日 14:17
file= のところは URL でもいけました。
src="flvplayer.swf?file=http://hogehoge.com/movie/hoge001.flv"
みたいに。
No.17046 投稿者 : *ほお* 2007年12月09日 17:17
付属のＪＳファイルとＪＰＧ画像を用意すると、黒画面も解消できましたよ。
No.17640 投稿者 : K 2008年01月10日 21:21
すばらしいっす！
参考にさせて頂きます(^0^)/
No.17912 投稿者 : ら 2008年02月10日 00:09
初心者です・・・。
flvplayer.swfがどこにあるのか分からないのですが、教えてください。
No.17913 投稿者 : ら 2008年02月10日 00:10
初心者です・・・。
flvplayer.swfがどこにあるのか分からないのですが、教えてください。
No.18013 投稿者 : p 2008年03月02日 03:39
ら さん
http://wasabi01.hp.infoseek.co.jp/flash/index.html
コレをご参考に（どうやらファイル名が変わったようですよ。
No.19536 投稿者 : みとこん 2008年05月30日 11:31
参考にさせていただきました！ありがとうございます！！
ご自由にコメントください(＝゜ω゜)ノ
※管理人は多忙のためお返事はほとんどできません（スミマセン）。スパムおよび本文と無関係なコメントは削除対象になる可能性があります。
▼ トラックバック ▼
このエントリーのトラックバックURL:
このリストは、次のエントリーを参照しています: 自分のページにお手製の Flash Movie (FLV) を貼り付ける方法:
トラックバック時刻: 2007年01月21日 14:38
» 制作記……Youtubeが出来るなら自分にも!・動画ファイルをFlash化して自分のサイトに貼り付ける from Garbagenews.com
当サイトでも何度と紹介している動画投稿サイト【Youtube】のスゴいところは、投稿された動画をFlash化してタグとして提供し、ブログパーツとして使える点にあ... [続きを読む]
トラックバック時刻: 2007年04月26日 08:20
» ブログに自前FLVを貼り付ける為の from さげろぐ(sagelog)
自動ソース生成ツールを作ってみた
ワシはプログラマでも何でもなく素人なんでこんなもん晒すのも恥ずかしいし
需要も激しく低そうなわけだが
やってることはファ... [続きを読む]
トラックバック時刻: 2007年07月19日 16:43
» tdiary で動画を載せる from Manu-'s diary
昨日はいろいろ試したw 最初にMP4にしてみたが、必ずしもQTがあるわけじゃないしなぁと。WMVだと窓だけになっちゃいそうだし。FLVが再生できリャいい... [続きを読む]
トラックバック時刻: 2007年10月27日 03:49
» XHTML from キャプテンアリスの＞ｗ＜
ここで使ってるブログエンジンはPHP＋MySQLで運用されており、W3C勧告に準拠したXHTMLを出力してくれる優れもの。ブラウザ、プラットフォーム毎に挙... [続きを読む]
