商用フリーでロゴ無し！埋め込み用FLVプレイヤーカスタマイズ編

一年以上前にロゴが入らないフリーのFLV PLAYERという記事を書きました。FLV形式のファイルをWebサイトに埋め込んで公開するためにはフラッシュ型のプレイヤーが必要で、フラッシュ型のプレーヤーはJW Playerなどが有名です。

しかしJW Playerは動画が再生されてから少しの時間左下にうっすらとロゴマークが入り、商用サイトの場合は有料のPro版を使用しなければいけません（非営利の場合は無料で使える）。そこで使えるのが、FLV Player。FLV Playerならロゴも入らず営利目的でも無料で使用可で、おまけにいろいろカスタマイズできるので非常にナイスです。

最近またFLV Playerのサイトに行ってみたら、ジェネレータがあることに気づきました（前アクセスしたときはジェネレータがうまく動かなかったような気がする）。これを使うと簡単にプレイヤーをカスタマイズできます。今回はそのやり方の紹介です。

[ad#co-1]

FLV Playerのダウンロード&サーバーへのアップロード

　
FLV Playerにアクセスし、サイト下部のMULTIをクリック。（MULTIが最も多くの項目を設定できます。限られた機能でシンプルなものが良い場合はMINIなどを選べば良いと思います）

　
右サイドバーのDownloadをクリック。

　
中央のplayer_flv_multi.swfをダウンロード。

　
ダウンドードしたファイルをサーバにアップロードします。今回はダウンロードしたファイルをplayer3.swfというファイル名に変更し、testというフォルダにアップロードしました。
　
　

FLV Playerのカスタマイズ

　
右サイドバーのGeneratorをクリック。

　
すると以下のようなページが開かれます。

　
上部にFLVプレイヤーが表示されていてカスタマイズが反映されます。そのすぐ下にCategoryのボックス。このドロップダウンリストからメニューを選ぶとそれぞれの項目を設定できます。

　
設定できるカテゴリーは以下のとおりです。

Generalの設定

今回は以下のように設定しました。再生したいflvファイルはhttp://www.nrkz.net/test/test.flvで、title、startimageは空欄。プレイヤーの高さを動画に合わせて変更。プレイヤーの再生ボタンなどがあるバーの高さがたぶん20ピクセルくらいなので、元の動画の240ピクセルに20追加して260を指定（バーの設定でバーが自動的に消える設定にする場合は動画のサイズのままでOK。枠線の幅を太くする場合はそのぶんも追加して指定する）。ループ無し。オートプレイ無し。オートロードあり。オートネクスト無し。プレイオンロードあり。シャッフル無し。ボリューム125。

Borderの設定

今回は枠線を表示を表示させたくないので、marginを0に指定。

Buttons of the player barの設定

今回はストップボタンを表示、ボリュームを表示、経過時間を表示、戻るボタン非表示、進むボタン非表示、オープンボタン非表示、バーは常に表示、全画面表示ボタンを表示、サブタイトル切り替えボタン非表示を設定。

Colors of the player barの設定

バーの色cfcfcf、透明度100、ロードカラー0000ff、ボタンカラー000000、マウスをのせたとこのボタンカラー00aa00、スライダーカラー１b4b4b4、スライダーカラー2888888、マウスをのせた時のスライダーカラー00aa00。

Buffer displayの設定

ここは特にいじらないでおきます。
　

Titleの設定

今回はタイトルをつけていないのでそのまま。
　

Subtitlesの設定

変更無し。
　
　

Mouse controlの設定

ここも変更は無し。
　
　

Playlistの設定

変更無し。

Images over the videoの設定

　
URLを指定すると動画の上にその画像を表示できます。url|x(x軸方向の位置)|y(y軸方向の位置)という記入で画像の位置をしているすることも可能らしい。

今回は画像なし。

[ad#co-1]
　

Video iconsの設定

アイコンを表示。色は白、背景は黒、透明度は75を指定。

Miscellaneousの設定

ここも特に変更はなし。

全ての設定が終了。HTMLコードを取得しサイトに表示する。

　
ジェネレータで書く項目の設定が終わったら、下に表示されているHTMLコードをコピーして貼り付けます。今回生成されたHTMLコードは次のような感じになりました。

<object type="application/x-shockwave-flash" data="http://flv-player.net/medias/
player_flv_multi.swf"
 width="320" height="260">
    <param name="movie" value="http://flv-player.net/medias/player_flv_multi.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="FlashVars" value="flv=http%3A//www.nrkz.net/test/test.flv&height=260&
autoload=1&autonext=0&volume=125&margin=0&showstop=1&
showvolume=1&showtime=1&showopen=0&showplayer=always&
showfullscreen=1&playercolor=cfcfcf&loadingcolor=0000ff&
buttoncolor=000000&buttonovercolor=00aa00&slidercolor1=b4b4b4&
sliderovercolor=00aa00&showiconplay=1" />
</object>

上のコードのうち、

http://flv-player.net/medias/player_flv_multi.swf

となっている部分を２ヶ所、先程プレイヤーをアップロードしたURL

http://www.nrkz.net/test/player3.swf

に変える（変えなくても表示できる）。変えたあとのコードは以下のとおり。

<object type="application/x-shockwave-flash"　data="http://www.nrkz.net/test/player3.swf" width="320" height="260">
    <param name="movie" value="http://www.nrkz.net/test/player3.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="FlashVars" value="flv=http%3A//www.nrkz.net/test/test.flv&height=260&
autoload=1&autonext=0&volume=125&margin=0&showstop=1&
showvolume=1&showtime=1&showopen=0&showplayer=always&
showfullscreen=1&playercolor=cfcfcf&loadingcolor=0000ff&
buttoncolor=000000&buttonovercolor=00aa00&slidercolor1=b4b4b4&
sliderovercolor=00aa00&showiconplay=1" />
</object>

これを記事に貼ると・・。

このように表示されて、完成です。

表示する動画を変えたいときは、上記コードのうち

http%3A//www.nrkz.net/test/test.flv

の部分を表示させたいFLVファイルへのパスに変更すればOKです。