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

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

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

赤さんダンス(不思議な踊り)

 

 

JW FLV Media Playerの使用方法

1.ダウンロード&解凍

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)の読み込みにも対応しています。

2.動画をMovableTypeからアップする

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

3.各ファイルの設置

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で登録した動画)

 

4.HTMLの記述

最後にHTMLに下記を記述。今回アップした動画は幅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>

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

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

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ヶ月頃のうちの赤さんです。
大変かわいらしいですね。
(↑親馬鹿)

参考サイト

 

Trackbacks Trackbacks (5)

久しぶりすぎる更新です(-_-;) IDだけ取得し更新してないブログ等を整理整... 続きを読む

デジカメで撮影した.aviファイルをMTで作ったブログ上に.flvで公開する方法をメモ。 動画をYouTubeにアップロードして埋め込みリンクを貼れば手... 続きを読む

やまぐち号の黒煙吐く姿を動画で公開したいと思い、mococo さんのブログの記事... 続きを読む

アルテッツァの造り方 - FLVの埋め込みテスト (2010年4月21日 13:55)

ふと思ったのでFLVを埋め込んでみるテスト。どうやれば良いかとググってみたら一撃... 続きを読む

キャプチャーした動画をMovableTypeの記事に表示する方法が無いか調べてみたところ、moco-moco.comさんの記事でMovableTypeで動... 続きを読む

Comment Comment (6)

初めまして!
とても参考になりました。
今まではYoutubeを使っていましたが、これなら専用の動画を置けます。

ありがとうございます。また遊びに来ます。
写真もとってもいいですね。
僕も写真、好きです。

ありがとうございます。自分のサーバ内に動画ファイルを置いて管理したい場合は便利ですよね。

daiziさんも写真やられるのですか?自分は最近新しい明るいレンズが欲しくて困っています。。。

とても参考になりました。
このMTを使ってFLVファイルを表示するやり方で
ページを開いた時、自動再生にする方法はありますか?

はじめまして。試聴用のプレイヤーを探していたところ友人からJW Playerが良いと聞きました。音楽だけ載せたいときにはどのようにすればよいのでしょうか?このようなことは初心者でよくわかりません。よろしくお願いいたします。

参考にしてブログに実装しました。ありがとうございました。

赤さん可愛いですね~。癒されます。

That is good that people can take the mortgage loans moreover, it opens up new chances.

コメントする