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：*.swfを読み込む為のファイル）
• video.flv（サンプルのビデオファイル）
   

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

video.flvはFLV形式の動画ファイルです。今回は080506_aka_on2vp6.flvというファイルを用意して進めます。また、動画を再生する前に表示するサムネイル画像として080506_aka_image.jpgを用意しました。動画とサムネイルは自由に使って頂いても構いません。あまり需要はないと思いますが...

※2010.6.15追記 現在のVer5のJW Player、もしくはVer4のJW FLV Media Playerでは、H.264の動画（拡張子MP4）の読み込みにも対応しています。

２．動画を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で登録した動画）

４．ＨＴＭＬの記述

最後にＨＴＭＬに下記を記述。今回アップした動画は幅640*高480ですが、表示サイズは幅480p*高360pxを指定して表示しています。動画表示サイズのリサイズもJW Player側で出来てしまうので非常に便利です。また、高さの指定は下の操作バーで縦20px加わる為、横480px、縦380px（＝動画360px＋操作バー20px）で設定してあります。

<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("file","/movie/080506_aka_on2vp6.flv");

s0.addVariable("image","/movie/080506_aka_image.jpg");

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

s0.write("players0");

</script>

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

▽ロゴファイルを表示する場合は下記一文を記述

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

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

▽サムネイルを表示する場合は下記一文を記述(※2010.6.15追記）

s0.addVariable("image","/movie/080506_aka_image.jpg");

s0.addVariable("image","サムネイル画像（PNG、JPG対応）");

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

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

参考サイト

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