Trivial Weblog

一年以上前にロゴが入らないフリーのFLV PLAYERという記事を書いた。FLV形式のファイルをWebサイトに埋め込んで公開するためにはフラッシュ型のプレイヤーが必要で、JW Playerなどが有名だけど、JW Playerは動画が再生されてから少しの時間左下にうっすらとロゴマークが入る。また、非営利の場合は無料で使えるけど、商用サイトの場合は有料のPro版を使用しなければいけない。FLV Playerなら、ロゴが入らない、営利目的でも無料で使用可、おまけにいろいろカスタマイズできるからかなりナイス。という記事。

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

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

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

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

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

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

FLV Playerのカスタマイズ

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

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

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

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

General	プレイヤーの基本機能の設定
Border	プレイヤーの枠の設定
Buttons of the player bar	プレイヤーのボタンとバーの設定
Colors of the player bar	バーの色の設定
Buffer display	バッファの設定
Title	タイトルの設定
Subtitles	サブタイトルの設定
Mouse control	マウスでの操作の設定
Playlist	プレイリストの設定
Images over the video	動画上の画像の設定
Video icons	動画上のアイコンの設定
Miscellaneous	その他いろいろな設定

　
　

Generalの設定

　

flv	再生したいflvファイルへのパス（URL）を入力する。あとからソースを直接変更することも可能。
title	動画のタイトルを記入するとプレイヤー内に表示される。
startimage	タイトル画像が指定できる。
width	プレイヤーの横幅の指定（単位px）
height	プレイヤーの高さの指定（単位px）
loop	１にすると動画をループさせることができる。
autoplay	１にするとページを開いたときに自動で再生できる。
autoload	１にするとページを開いたときに自動でダウンロードを開始する。（０の場合は再生ボタンを押してからダウンロード開始）
autonext	１にすると自動で次の動画にスキップする。
playonload	０にするとダウンロード後に動画が再生されない。
shuffle	１にすると動画がシャッフル再生される。
volume	ボリュームの初期値の設定。

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

　
　

Borderの設定

　

skin	スキン（jpegファイル）の指定。
margin	動画の外枠とプレイヤーの外枠の間の幅、つまり枠線の太さの指定。
bgcolor	枠線の背景色（角の部分などに見える）。
bgcolor1	プレイヤー上部の背景色。ここで指定した色から枠のグラデーションが始まる。
bgcolor2	プレイヤー下部の背景色グラデーションの終わりの色。

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

　
　

Buttons of the player barの設定

　

showstop	１にすると停止ボタンを表示。
showvolume	１にするとボリュームのボタンを表示。
showtime	１にすると経過時間を、２にすると残り時間を表示。
showprevious	１にすると戻るボタンを表示。
shownext	１にすると進むボタンを表示。
showopen	１にするとオープンボタンを表示。２にするとプレイリストを表示。
showplayer	autohideでバーが自動的に消える、alwaysで常に表示、neverで表示しない。
showfullscreen	１にすると全画面表示のボタンを表示。
showwsitchsubtitles	１にするとサブタイトルの表示を切り替えるボタンを表示。
playertimeout	autohideを設定した時のバーが消えるまでの時間（単位ミリセカンド）

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

　
　

Colors of the player barの設定

　

playercolor	プレイヤーバーの背景色の指定。
playeralpha	プレイヤーバーの透明度の指定。
loadingcolor	ロードしているときのバーの色の指定。
buttoncolor	ボタンの色の指定。
buttonovercolor	マウスをのせた時のボタンの色の指定。
slidercolor1	バーのスライダー上部の色の指定（この色からグラデーション開始）。
slidercolor2	バーのスライダー下部の色の指定（グラデーションの終わりの色）。
sliderovercolor	マウスをのせたときのスライダーの色の指定。

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

　
　

Buffer displayの設定

　

buffer	バッファの時間の設定。（単位秒）
buffermessage	バッファ時のメッセージの設定。

ここは特にいじらない。
　
　

Titleの設定

　

titlecolor	タイトルの文字色の設定。
titlesize	タイトルのフォントサイズの設定。
showtitlebackground	タイトルの背景の表示方法の設定。

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

Subtitlesの設定

　

srt	１で字幕のサブタイトルを使う設定。
srtcolor	字幕の文字の色の設定。
srtbgcolor	字幕の背景色の設定。
srtsize	字幕のフォントサイズの設定。

変更無し。
　
　

Mouse controlの設定

　

onclick	マウスで動画をクリックした時の挙動の設定。URLを指定するとクリックしたときにそのURLへ移動する。playpauseは一時停止。何もしない場合はnoneを指定する。
onclicktarget	上で指定したURLがクリックされたときに、新しいウインドウで開くか、同じウインドウで開くかの指定。_selfは同じウインドウで開く。_blankは新しいウインドウで開く。
ondoubleclick	動画をダブルクリックしたときの挙動の設定。noneは何もしない。playpauseは一時停止。fullscreenで全画面表示。URLを指定するとそのURLに移動する。
ondoubleclicktarget	上で指定したURLがクリックされたときに、新しいウインドウで開くか、同じウインドウで開くかの指定。_selfは同じウインドウで開く。_blankは新しいウインドウで開く。

ここも変更は無し。

　
　

Playlistの設定

　

currentflvcolor	プレイリストの中の最近再生した動画の色の指定。
playlisttextcolor	プレイリストの文字の色の指定。
scrollbarcolor	スクロールバーの色の指定。
scrollbarovercolor	マウスをのせたときのスクロールバーの色の指定。
scrollbarsize	スクロールバーの大きさの指定。

変更無し。

　
　

Images over the videoの設定

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

今回は画像なし。
　
　

Video iconsの設定

　

showiconplay	１で動画の真ん中に再生のアイコンを表示。
iconplaycolor	表示されるアイコンの色の指定。
iconplaybgcolor	表示されるアイコンの背景色の指定。
iconplaybgalpha	表示されるアイコンの背景色の透明度の指定。

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

　
　

Miscellaneousの設定

　

showmouse	動画上でのマウスカーソルの表示方法の設定。alwaysで常に表示、autohideで一定時間後に消える、neverで表示させない。
videobgcolor	動画が表示されなかったときの背景色の指定。
shortcut	０でキーボードによるショートカットを無効化。
videodelay	動画のタイトルが表示されている時間の設定。
showtitleandstartimage	１にするとタイトルとタイトル画像が同時に表示される。

ここも特に変更はなし。

　
　

全ての設定が終了。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。

MOV形式のファイルを編集するソフトに、「編集したMOVファイルをYoutubeにアップロードすると冒頭部分の映像がおかしくなる」というコメントをいただきました。コメントをいただいたときはYoutubeを使ったことがなくて対処法がわからなかったのですが、先日初めてYoutubeに動画をアップロードした際に私も同じような状態になり、以下のように対応しました。　

これは冒頭部分の映像の乱れ。灰色になって潰れてしまっている。
　

MPEG Streamclipで編集したMOV形式のファイルをそのままアップロードすると、切った部分の映像がおかしくなります。例えば動画１からAという部分を切り取ると、Aの冒頭部分の映像が乱れてしまいます。また、動画の後半にいくにつれて音のズレも大きくなっていきます。

複数のMOVファイルをくっつけたりしたものだと特にひどい。動画のつなぎ目で必ず映像が乱れ、音ズレも大きくなります。見ていてイライラしてしまうほど。
　
つなぎ目の映像の乱れ。次の場面の映像と重なってぐちゃぐちゃになってます。

どうしたものか・・と思っていましたが、MOVファイルをFLVに変換してWebで公開するときにAVIに変換してたことを思い出して、今回もそれをやってみました。動画の形式を変換するフリーソフトはいろいろありますが、もともとMPEG Streamclipには編集した動画を別の形式に変換する機能もついているのでそれを利用します。

　
　

MOV形式をAVI形式に変換する

　

File→Open Filesで変換したい動画を開き、File→Export to AVIを選択します。

　

するとこんな画面になります。

上部にあるQualityという部分で画質が変更できますが、画質を高くするとファイルサイズがめちゃくちゃ大きくなるので注意が必要です。50％のクオリティでも、MOVからAVIへ変換するとファイルサイズがかなり大きくなります。

Soundというところで音声、Frame Sizeで画面の大きさなど、いろいろ変えることができますが、私はQualityの部分以外いじったことないです。今回は何も変えずに右下のMake AVIというところをクリック。

するとファイルの保存先と名前を変更できる画面になります。

保存先を選択し、適当な名前をつけ、右の保存をクリックすると変換が始まります。
　

変換中・・・。

　

こうやって変換した動画ならYoutubeにアップロードしても映像も音声も乱れません。

　
　

しかし、AVIに変換すると元のMOVファイルよりもなぜか映像が少し暗くなってしまいます。

暗くなったAVIのキャプチャ。

　
見れないほどではないんだけどなんかな・・しかもファイルサイズが元ファイルの３倍くらいになってるしな・・・ということでMP4への変換も試してみました。

　
　

MOV形式をMP4形式に変換する

　

やり方はAVI形式への変換と同じです。File→Open Filesで変換したい動画を開き、File→Export to MPEG-4を選択します。

　

Make MP4をクリックして変換します。

　

Quality50％で変換しできあがったファイルのサイズは元のMOVファイルの3分の1以下。見比べて画質が落ちてるのがわかりました。Quality70％くらいでやってみたらあんまりわからなくなったので今回は70％で。ファイルサイズは元ファイルの半分強といったところ。
　

これでavi形式のファイルをアップロードするよりも明るい映像＆音ズレや映像の乱れ無しでYoutubeにアップロードすることができました。

FLV形式のファイルをWebで公開するには、再生するためのFLASH型のプレーヤーが必要。で、前回の記事ではJW Playerを使ったんだけど、このプレーヤーは再生した直後に左下にうっすらロゴが入る（すぐに消えるけど）。ロゴはプレーヤーを配布しているサイトへのリンクになっている。しかも、商用利用のときはライセンスを購入する必要があるらしい（非営利での利用はフリー）。

フリーのやつはロゴが入るタイプのプレーヤーが多い。ロゴが入らないプレーヤーってないのかなーと探していたらこれを発見した。

・FLV Player

これはかなりいい感じ。５つの種類があって用途によってプレーヤーを選べる。商用もOKっぽい。MINI、NORMAL、MAXI、MULTI、JSって書かれたところをクリックすると各プレーヤーの違いがわかるようになっているので、自分が使いたいタイプのプレーヤーをダウンロードして使用する。普通に再生するだけならNORMALで十分かな。今回は全画面表示ができるMAXIを使ってみた。

MAXIをクリックすると以下のような画面になる。右側のメニューのDownloadってところをクリックするとプレーヤーがダウンロードできる。player_flv_maxi.swfってファイルをダウロードして、そのままサーバーへアップロードして使う（今回はファイル名をplayer2.swfに変更して使った）。

Documentationってところをクリックすると、HTMLの記述例と各種パラメータの説明がある。

Exampleのところの例を参考に、以下のように記述してみる。

<object type="application/x-shockwave-flash" data="http://www.nrkz.net
/test/player2.swf" width="320" height="240">
     <param name="movie" value="http://www.nrkz.net/test/player2.swf" />
     <param name="FlashVars" value="flv=http://www.nrkz.net/test/test.flv" />
</object>

するとこんな感じで表示される。

これだけでは再生ボタンしか表示されないので、以下のようにパラメータを追加する。

<object type="application/x-shockwave-flash" data="http://www.nrkz.net
/test/player2.swf" width="320" height="240">
     <param name="movie" value="http://www.nrkz.net/test/player2.swf" />
     <param name="allowFullScreen" value="true" />
     <param name="FlashVars" value="flv=http://www.nrkz.net
/test/test.flv&amp;width=320&amp;height=240&amp;
showstop=1&amp;showvolume=1&amp;showtime=1&amp;
showfullscreen=1&amp;showplayer=always" />
</object>

以下のように記述したものを.flvの後ろに追加。

&パラメータ名=値

今回は以下のパラメータを使用。

width	横の長さを指定
height	縦の長さを指定
showstop	1でストップボタンを表示
showvolume	1でボリュームを表示
showtime	1で時間を表示
showfullscreen	1で全画面表示ボタンを表示
showplayer	alwaysで常にバーを表示する

するとこんな感じで表示される。

パラメータを使ってプレーヤーの色とかもカスタマイズできる。こっちのほうがいいね。

※商用もフリーでロゴも入らない埋め込み用FLVプレイヤーをジェネレータで簡単カスタマイズ