私的アンテナTYPE-F（赤は48時間以内に更新されたコンテンツ）
＜｜日々の戯言｜アニメ｜コミック｜ゲーム｜美少女系ゲーム｜フィギュア｜ドール全般｜しーぽん｜ちっちゃなもこちゃん｜えっくす☆きゅーと｜アキバ系｜りとらば｜U-10｜BLOG｜ネット｜ネタ｜このサイトについて｜＞

2007年02月16日 (金曜日)

[ BLOG ]

FlashビデオをBlogで配信

上のサンプルは以前mpgで配布していた動画のFlashビデオ版です。
最近は「とかちつくちて」などYouTubeを使ったFlashビデオが流行ってますが、今回はYouTubeを使わずFlashビデオを自ら配信する方法を紹介します。

ということで手順を説明します。
と、その前にflv変換ツール、プレイヤーなどについての知識を以下のサイトで仕入れておいてください(^^;
▼無料でFLVのWeb配信 (Kenのムービー計画)


１．flvファイルを準備する
　　YouTubeからダウンロードしたflvでも構いませんが後々問題になりそうなので、MediaCoderなどを使って手持ちの動画をflvに変換します。


２．flvプレイヤー「Flash Video Player」を準備する
　　Flash Video Playerをダウンロードした後展開します。
　　必要になるのはこの中の「flvplayer.swf」、「ufo.js」の2つです。


３．flv関連ファイル用のディレクトリを作成する
　　今回とある事情により、flvファイルを格納するディレクトリを作る必要があります。
　　ここでは仮にBlog直下にmovieというディレクトリを作成します。


４．flvplayer.swf、ufo.js、flvファイルをflv用ディクトリへ転送する
　　３．で作成したディレクトリへflvplayer.swf、ufo.js（この二つは最初だけ）、flvファイルを転送します。


５．.htaccessにmod_rewriteを設定する
　　Flash Video Playerは他サイトのflvファイルを呼び出すことも出来るようです。
　　しかしufo.jsを使う場合、flvplayer.swf、flvファイルが呼び出し元html・phpと同じ階層にないと動きません。
　　このため管理上アーカイブファイルを年月（日）毎のディレクトリに分けているBlogの場合、それぞれのディレクトリにflvplayer.swf、flvファイルを配置しなければいけなくなります。
　　そこでflv用に一つディレクトリを決め、mod_rewriteで全てそこへ内部リダイレクト、見かけ上Flash Video Playerが同階層へアクセスしているように設定してあげます。
　　なお.htaccessやmod_rewriteの解説は行いません。判っている人向けということで一つ・・・(^^;

　・Blog直下のIndex用.htaccessサンプル
　　

RewriteRule ^flvplayer\.swf$ /xxxxxxxx/movie/flvplayer.swf [L]
RewriteRule ^(.+)\.flv$ /xxxxxxxx/movie/$1.flv [L]

　・Archives用.htaccessサンプル
　　

RewriteRule ^[0-9]{6}/flvplayer\.swf$ /xxxxxxxx/movie/flvplayer.swf [L]
RewriteRule ^[0-9]{6}/(.+)\.flv$ /xxxxxxxx/movie/$1.flv [L]
RewriteRule ^flvplayer\.swf$ /xxxxxxxx/movie/flvplayer.swf [L]
RewriteRule ^(.+)\.flv$ /xxxxxxxx/movie/$1.flv [L]


６．Blogの各テンプレートにufo.jsを追加する
　　<head>～</head>の間に
　　

<script language="javascript" type="text/javascript" src="movie/ufo.js"></script>

　　の形で追加します。これがないとエントリーに呼び出しスクリプトを記述しても何も表示されません。


７．Blogのエントリーにflvプレイヤー呼び出しスクリプトを記述する
　　flvプレイヤーを呼び出すスクリプトをムービーを表示したい場所へ記述します（オレンジ部分は実際のムービーに合わせます）
　　pタグは他のタグに変更しても影響はありません。好みで変えてください。
　　また赤字のIDを変えれば、複数のムービーを配置することも可能です。
　　

<p id="player1">
<script type="text/javascript">
var FO = {movie:"flvplayer.swf",width:"ムービーの幅",height:"ムービーの高さ",majorversion:"7",build:"0",
bgcolor:"#FFFFFF",flashvars:"file=FLVファイル.flv" };
UFO.create(FO, "player1");
</script>
<noscript>
ムービーを表示させるにはJavaScriptを有効にしてリロードしてください
</noscript>
</p>


８．Blogにエントリーを保存、全て再構築を行う
　　テンプレートにufo.jsを反映させるため、全て再構築を行います。


以上で作業は終わりです。
トップ・アーカイブページのそれぞれから再生出来れば成功です。

多少やり方が面倒な部分もありますが、手持ちの動画や携帯などで撮影したものを気軽に公開出来るのは良いですね。
mod_rewrite部分が若干難解かも知れませんが、文法はそう難しくないので興味のある方はチャレンジしてみてください(^^;

【関連するトピックス】
▼「出没！アド街ック天国」にママチャキタ━ﾟ+.ヽ(≧▽≦)ﾉ.+ﾟ━ッ!!

Posted by minagi at 1:19 | 固定リンク | コメント (0) | トラックバック (0)
トラックバック
このエントリーのトラックバックURL:

スパム対策の為、トラックバック元URLに本Blogへのリンクを含まない場合、トラックバックを受け付けない仕様になっています。また、Blogやそれに順ずるシステム以外からのトラックバックも受け付けません。予めご了承ください。
なお、お手数ですがトラックバックＵＲＬより「☆★」を取り除いてください（オートディスカバリ非対応です）
コメント
コメントする






情報を保存しますか?


画像の数字を入力