moco-moco.com モコモコドットコム

サイトで動画を掲載したい場合、YouTubeやニコニコ動画などの動画サービスにアップする方法がありますが、プライベートな動画を掲載する場合は、やはり管理しやすい自分のサーバー内にアップしておくのが便利でしょう。

今日は自分のサーバーに動画をアップして掲載できるJW FLV Media Playerを使った方法を紹介します。

ちなみに、動画の表示はこんな感じになります。

赤さんダンス（不思議な踊り）

JW FLV Media Playerの使用方法

１．ダウンロード＆解凍

JW FLV MEDIA PLAYER 3.16

上記よりファイルをダウンロードして、解凍すると下記のファイルが出てきます。
使用するファイルは主に2つ（＋動画のvideo.flv）です。

• mediaplayer.swf（FLV Media Player本体）
• swfobject.js（FLASHを読み込む為のファイル
• video.flv（サンプルのビデオファイル）
  
  

SWFObjectはFLASHのswfを読み込む為の定番ですね。JW FLVではSWFObjectのjsファイルも一緒に同梱されています。SWFObjectの使用方法についてはtrick7.comさんのサイトで詳しく紹介されているので、ここでは省きます。

video.flvはFLV形式の動画ファイルです。今回は080506_aka_on2vp6.flvというファイルを用意して進めます。

２．動画をMovableTypeからアップする

MovableTypeの管理画面から【新規作成】→【ファイルアップロード】を選択して動画をアップします。FTPなどでアップロードしても構いませんが、MovableTypeからアップすれば【一覧】→【アイテム】から管理できるようになります。 今回は用意した080506_aka_on2vp6.flvをmovieというフォルダの中にアップロードしました

３．各ファイルの設置

mediaplayer.swfとswfobject.jsをFTPなどからアップします。

参考までにmoco-mocoでは下記のように設置しました。

▽JW FLV Media Player設置例
root/（＝http://www.moco-moco.com/）
　│
　└─ common/
　│　　　│
　│　　　└─ js/
　│　　　│　　│
　│　　　│　　└─ swfobject.js（swfファイルの呼び出し）
　│　　　│
　│　　　└─ swf/
　│　　　　　│
　│　　　　　└─ mediaplayer.swf（JW FLV Player本体）
　│
　└─ movie/
　　　　　│
　　　　　└─ 080506_aka_on2vp6.flv（MovableTypeで登録した動画）

４．ＨＴＭＬの記述

最後にＨＴＭＬに下記を記述。今回アップした動画は横480pＸ縦360pxのサイズなので、下の操作バーで縦20px加わり横480px、縦380pxで設定してあります。

<div id="players0"><a href="http://www.adobe.com/go/gntray_dl_getflashplayer_jp; title="Get the Flash Player">Get the Flash Player</a></div>

<script type="text/javascript" src="/common/js/swfobject.js"></script>

<script type="text/javascript">

var s0 = new SWFObject("/common/swf/mediaplayer.swf","mediaplayer","480","380","8");

s0.addParam("allowfullscreen","true");

s0.addVariable("width","480");

s0.addVariable("height","380");

s0.addVariable("file","/movie/080506_aka_on2vp6.flv");

s0.write("players0");

</script>

後は３でアップロードした環境に合わせて、太字の部分を書き換えれば完成。変数を指定する事で様々なカスタマイズが可能です。例えば、下記一文を追記すれば動画中でロゴの表示もできます。

s0.addVariable("logo","/common/png/logo-mini.png");

so.addVariable("logo","ロゴファイルのURL（PNG透明推奨）");

一度設定してしまえば、2回目以降は動画をMovableTypeからアップして、動画URLを変えるだけで動画が掲載できるので非常に便利かと。

ちなみに動画で奇妙な動きをしているのは2ヶ月頃のうちの赤さんです。
大変かわいらしいですね。
（↑親馬鹿）

参考サイト

• JW FLV MEDIA PLAYER(ダウンロード）
• JW FLV SUPPORTED FLASHVARS（カスタマイズ）
  
• お手軽にSWFObjectでswfを埋め込む方法(SWFObject解説）
  　（参考元：trick7.comさん）