今回は、Flowplayer を同一ページ内で複数個扱う方法です。
(Multiple Players というヤツです)
複数扱う場合でも、
見た目とは裏腹に <script></script> をいくつも書かないのがポイントです。
当サイトの↓ページでも複数扱う事はやっているのですが
参考ページ :
Bad Maniacs 動画
http://ladyoss.net/2009/12/24/355/
NEW SENSATION – もう、あなたしか見えない – 動画
http://ladyoss.net/2010/02/28/691/
こうではなくて、
純粋にプレーヤーを複数個並べて表示する方法を紹介します。
1. 準備
1-1) 使用するコード
[WordPress] FlowPlayer の使い方 -その2- で作った下記のコードを使います。
<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-2) 使用する動画
忘れてはいけない大事なコンテンツ。
同一ページ内に表示したい分だけ作ります。
今回は、仮に Video1 と Video2 として2つのパターンでやってみますが
実際には 3つでも4つでも無問題です。
2. コードを書く
ここからが本題。
記事に書く際、1-1) のコードの1行目とそれ以外とで分けて考えます。2-1) Playlist の作成
今回は Video1 と Video2 の2つあるので、1-1) のコードの1行目が2個になります。
今までとちょっと違って、同一ページ内で複数のコンテンツを扱うので
動画までの path を <a></a> タグの中に直接書き込みます。
この部分が一種の playlist となります。
2-2) Player 呼び出しコード
2-1) のような Playlist の書き方をすることで
本体呼び出しの <script></script> タグを1つで済ませ、
煩雑さを可能な限り排除していきます。
1-1) のコードから変わる部分は
clip オプションの url プロパティを削除する事ぐらいです。
<script language="JavaScript"> $f("***", "/path/to/the/flowplayer-3.1.5.swf",{ clip: { autoPlay: false, autoBuffering: true } }); </script>このコードひとつで、それぞれの <a></a> に player が出現します。
面白いですね。2-3) 全体のコード
下記が 2-1) と 2-2) を合わせた全体コードで、これを記事の中に記述します。
<a id="***" class="###" href="/path/to/Video1.flv"></a> <a id="***" class="###" href="/path/to/Video2.flv"></a> <br clear="all"/> <script language="JavaScript"> $f("***", "/path/to/the/flowplayer-3.1.5.swf",{ clip: { autoPlay: false, autoBuffering: true } }); </script>注意点は、前回と変わらずですが
id プロパティを $f 関数のプロパティと合わせること、
class プロパティを css と合わせること、
の2点です。
これで同一ページ内にいくつも動画をスマートに表示させることが出来ます。
2-3) の1行目2行目を <li></li> タグで囲ってみるとか、
HTML の表現方法がそっくりそのまま使えるのもポイントです。