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

/ 日記 / Comment[0]
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="http://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つセットでアップロードして埋め込めば
比較的簡単に管理できるでしょう。
関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可