埋め込み動画プレイヤー 60PLYRを入れてみた

htmlに埋め込めるプレイヤーを探してたら60PLYRとやらを見つけました。
シンプルで無駄な機能が無いというところがツボです。

シンプルながら、再生/一時停止/シーク/再生時間/ボリューム/ミュート/フルスクリーンといった
動画再生に必要なコントロールを備え、マウスオーバー/アウト時のカラーや背景画像の設定も可能です。
対応コーデックはh264/flv,mp4　殆どのスマフォやデジカメで取った映像をｴﾝｺせずに貼り付けられます。

導入方法(ver1.1.0)
1.Downloadから一式入ったzipを落として展開

zipに入っているファイルは次の通り
・test.html　埋め込みタグのサンプル
・plyr.swf　プレイヤー本体swf
・setting.xml 設定ファイル
・flash_images/　プレイヤーのスキン画像が入ったディレクトリ
・test.flv　テスト用のflv？とりあえず不要


2.flash_images/*, plyr.swfと動画ファイルをアップロード
FC2ブログの場合はディレクトリは作成できず,1ファイルの容量も2MBまでに制限されているので
ファイルの重複や容量に気をつけてアップロードしましょう。
外部の無料レンタル鯖にアップロードするという手もありです。


3.setting.xmlを編集,アップロード
太字斜めのところをアップロードしたflash_images/*の画像と置き換えます。
flv src=""のところにflvの直リンクを貼ります。

<data>
<flv src="http://60ft-tools.com/60plyr/vimeo.flv"></flv>
<img ctrl_bg="ctrl_bg.jpg" vol_bg="vol_bg.jpg" thum="thum.jpg"></img>
<play on="0x0099FF" off="0xFFFFFF"></play>
<loading on="0x000000" off="0xFFFFFF"></loading>
<slider on="0x0099FF" off="0xFFFFFF"></slider>
<vol on="0x0099FF" off="0xFFFFFF"></vol>
<volHundle on="0x0099FF" off="0xFFFFFF"></volHundle>
<full on="0x0099FF" off="0xFFFFFF"></full>
<last src="restart.png" action="1" url="http://60ft-tools.com/60plyr/" jump="1"></last>
<quality value="high"></quality>
<seek method="1"></seek>
<hosei level="0"></hosei>
</data>

4.htmlに埋め込み
下記が埋め込みコードです。太字斜めのところは修正必須です。
お好みでwidth,heightやparamを調節しましょう。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"　width="480" height="385" id="plyr" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="xml_src=./setting.xml" />
<param name="movie" value="plyr.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="plyr.swf" quality="high" bgcolor="#ffffff" width="480" height="385" name="plyr" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_jp" FlashVars="xml_src=setting.xml" FlashVars="xml_src=setting.xml" />
</object>

width,height以外の調整は不要な場合はembedタグだけでも貼れます。
例：

<embed src="https://blog-imgs-62.fc2.com/p/h/a/phantom37383/plyr.swf" quality="high" bgcolor="#ffffff" width="480" height="385" name="plyr" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_jp" FlashVars="xml_src=http://blog-imgs-62.fc2.com/p/h/a/phantom37383/setting.xml" FlashVars="xml_src=http://blog-imgs-62.fc2.com/p/h/a/phantom37383/setting.xml" />

↓表示結果↓



setting.xmlを動画ファイルごとに関連付けた名前で用意し、
貼り付けの際に動画ファイルとxmlファイルを2つセットでアップロードして埋め込めば
比較的簡単に管理できるでしょう。