わ～っノシ (挨拶のつもり)
今日も今日とて WordPress のカスタマイズ。
昨日 CSS 弄らなきゃとか言ってたのにどうしても気になって(汗
Videopop+ も激しくよいのですがFlowplayer は以前使っていたし、
Flowplayer の Videopop+ 的なプラグインもあるのですが
どうしても自分でコーディングしたくて・・・
その熱意をもっと違うほうに・・
さて、、
私はソフトウェアな人間じゃないけど
今回は一番基礎となる実装について書いておきます。
もうね、ほとんど自分の備忘録ですよ。。
1. Flowplayer の設置
1-1) 本体の Download
http://flowplayer.org/index.html公式サイトの右上に Download ボタンがあるので、そこから落としてきましょう。
GPL License (free version) で構いません。
解凍したら
Flowplayer + "flowplayer.controls-3.1.5.swf" + "flowplayer-3.1.5.swf" | + exsample + "flowplayer-3.1.4.min.js"の3つのファイルを下記のような感じでサーバーに設置します。
http://サイトのURL/ + swf/ | + "flowplayer.controls-3.1.5.swf" | + "flowplayer-3.1.5.swf" | + js/ + "flowplayer-3.1.4.min.js"1-2) パーミッションを設定する
パーミッションは “755″ とかで良いでしょう。
2. HTML で動かす
2-1) Header へ js ファイルを include
Flowplayer は Javascript で動いてますので、
そのライブラリになる js ファイルを Header に入れてしまいます。
<script type="text/javascript" src="http://path/to/the/flowplayer-3.1.4.min.js"></script>src= の後に js ファイルまでのアドレスを書きます。
WordPress の場合は、この方法は美しくないみたいですが
とりあえず、これで Header に読ませてしまいます。
2-2) Video ファイルを読み込ませる
再生する Video ファイルと大きさを <a> タグで読み込ませます。
<a href="http://path/to/the//動画.flv" style="display:block;width:横幅px;height:高さpx;" id="適当な文字(20091211 とか)"> </a>Ajax のように <a></a> で囲まれた中に指定したサイズでプレーヤーが出現します。
ここで注意事項！
2行目で指定する height (高さ) ですが、
再生時のコントロールバーが計算に入ってないので 22px 余分に追加 するのがコツです。
2-3) Flowplayer を HTML 内へ install
最後は、Flowplayer 本体を HTML へ埋め込む作業です。
Flowplayer は Javascript で動いてると書きましたが、
埋め込むには下記の要領で Script タグを HTML へ記述します。
<script language="JavaScript"> flowplayer("id", "path/to/the/flowplayer-3.1.5.swf"); </script>Javascript なので <script></script> タグで囲みます。
2行目の中にある “id” ですが、2-2) で指定していた “id” です。
id="適当な文字(20091211 とか)">つまり、Flowplayer は、この id と同じ id を持つ動画を再生するようになっているのです。
(それだけではないのですが・・)
必ず同じ id を書きましょう。
—-
どうでしょう？うまく出来ましたか？
多分このままだと かなり不便だと思うので
次回はもう少し手を加えて行きたいと思います！
それでわ～～ノシ
タグ: FlowPlayer