いかん、だいぶ このネタに関して間をあけてしまった。。
今日は前回の続きとして
Flowplayer の実装について備忘録的に残すことにするです。
さて、前回はこんな感じで実装をしました。
<script type="text/javascript" src="http://path/to/the/flowplayer-3.1.4.min.js"></script>
<a href="http://path/to/the/動画.flv"
style="display:block;width:横幅px;height:高さpx;"
id="適当な文字(20091211 とか)">
</a>
<script language="JavaScript">
flowplayer("id", "path/to/the/flowplayer-3.1.5.swf");
</script>
で、これが基本形なんですが、実は結構微妙なんで
もうちょっと扱いやすい形に書き換えていきます。
1. 本体の書き換え・変形
Flowplayer は jQuery を使っているので、
まずはそれっぽく下記のように書き直します。
具体的には 9行目の Flowplayer の swf 本体を指定してるところ。<script type="text/javascript" src="http://path/to/the/flowplayer-3.1.4.min.js"></script> <a href="http://path/to/the/動画.flv" style="display:block;width:横幅px;height:高さpx;" id="適当な文字(20091211 とか)"> </a> <script language="JavaScript"> $f("id", "/path/to/the/flowplayer-3.1.5.swf"); </script>これをさらに書き換えていくのですが、
項目ごとに区切って別々に書いてしまいます。
1-1) HP の header に入れてしまう項目
前回も書きましたが、
下記の部分は header に直接書いてしまうことでイチイチ記述しないようにします。<script type="text/javascript" src="http://path/to/the/flowplayer-3.1.4.min.js"></script>1-2 表示体裁の部分を style sheet に。
今までは、4行目や5行目のように
HP で表示される横幅とか高さを直接書いてましたが
これを style sheet に抜き出して書いてしまうことで
煩雑さをなくそうというものです。
以下のようにして style 部分を抜き出し、style sheet に記述します。<style> a.class名 { margin-top:40px; display:block; /*background:url(スプラッシュイメージへのパス/画像.png) no-repeat; */ width:480px; height:292px; padding:0 75px 75px 75px; text-align:center; color:#fff; text-decoration:none; cursor:pointer; } </style>style sheet に書く際には <style></style> タグは要らないので
a.class名 から始まる中身だけ書きましょう。
1-3 記事に記入する部分
で、記事には残った部分をこんな感じで書きます。
<a href="/path/to/the/動画.flv" id="***" class="###"></a> <script language="JavaScript"> $f("***", "/path/to/the/flowplayer-3.1.5.swf"); </script>最初に比べるとずいぶんスッキリとしました。
id プロパティのほかに class プロパティも付随するようになってるのに注意です。
前回、
Flowplayer は、この id と同じ id を持つ動画を再生するようになっている
と書きましたが
今回は、この id/class プロパティを持つ <a></a> の
style と Flowplayer の呼び出しを決定するのに使います。
よって、この id/class を変えていろんな形状を作り置きしておくことで、
(style sheet にいくつも作っておくことで)
中身のコンテンツに応じてプレーヤーや表示を切り替えることが可能。
style sheet に記述する 3行目の a.class名 は、
ここで指定している class=”###” の ### の部分を使って書きます。
この場合だと、a.### になりますね。
2. 本体へコントロールオプションを入れる
実際、上記のように記述して HP を表示させると、色々困ることがあります。
中でも、ページを表示した瞬間に動画再生が始まってしまうという
致命的ともいえる問題が少なくとも出てきます。
そこで、Flowplayer のコントロールオプションを使って
サイトを訪れてくれた方が任意で再生できるような実装をします。
2-1 自動再生しないようにする
というわけで、1-3 で作った基本形にコントロールオプションを追加します。
このサイトでは以下のように記述しています。
<a id="player" class="player"></a> <script language="JavaScript"> $f("player", "/path/to/the/flowplayer-3.1.5.swf",{ clip: { url: '/path/to/the/動画.flv', autoPlay: false, autoBuffering: true } }); </script>順番に解説します。
1行目の <a></a> には id と class 名を入れるのみです。
この <a></a> に囲まれた部分に動画が表示される事は変わっていません。
3行目は、Flowplayer を呼び出す関数です。
ここでは id に player と名付けたので、最初のプロパティに “player” をつけ、
カンマで区切って Flowplayer の本体へのパスを書きます。
相対パスでも絶対パスでもどっちでも問題ないです。
ちなみに、class の名称は style sheet と合せてください ね。
ここからが本題。clip というオプションを使って Flowplayer にコントロールを入れます。
5行目は、動画までのパスを (相対/絶対 ともに可)、
6行目は、自動再生しないようにするオプションを、
7行目は、ページを開いたときに動画の DL を開始するかどうか、
を それぞれ指定します。
こうすることで、ページを開いたとき
自動的に buffering は開始しても再生はしなくなります。
buffering すらちょっと、、と思う方は、7行目を fales に変えてください。
注意事項としては、記事に書く際に
コードとコードの間に余計な改行を入れないこと です。
WordPress の場合、良くわからんですが、余計な改行入れると
script エラーが発生しやすくなる模様です。
ちょっと長くなってしまいましたが、
これで扱いやすい形になったのではないかと思います。
このコードを自分のパソコンに残しておくことで、
アップしたコンテンツのパスまでを記述すればすぐに使えるようになります。
私も、コピペでそこだけ書き換えて使ってます (笑)
clip には色々あるのですが、これが一番重要かなぁとか個人的な意見。
タグ: FlowPlayer