lightbox的にFLV表示

  • 投稿日
  • 更新日
  • 著者 kngsmym
  • カテゴリー jQuery

お客様から動画データを貰ってサイトに組み込む際に、lightbox的に表示してはどうか、というお話を貰いまして色々試してみました。

試した中では、これがなかなかいい感じでした。

JQUERY.LIGHTPOP
http://plugins.jquery.com/project/lightpop

設置の諸々は、下記のページを参考にしました。ありがとうございました。

http://dogmap.jp/2007/12/22/jquerylightpopjs/

さて、設置自体は比較的簡単にできましたが、上記のページにも書いているとおり表示したい動画がFLVの場合はFLVプレイヤーを別途組み込む必要があります。このプラグインはJW FLV Playerというプレイヤーに対応しているようです。

でもこのJW FLV Playerにはいくつか問題があります。
・読み込み後数秒間このプラグインのサイトへのロゴとリンクが表示される。
・商用利用は有料。

そこでロゴが表示されず、無料で商用利用が可能なプレイヤーを探して、JQUERY.LIGHTPOPに組み込んでみました。

使用したプレイヤーは以下のもの。

FLV Player

こちら、プレイヤーに5種類ありまして、用途によりそれを選んで使用する形になります。今回僕はmaxiを使用しました。

プレイヤーを選ぶと、右にメニューが出ます。Downloadで必要なファイルを落として、Generatorでソースをなんとなく作って、HTMLに貼り付ける、という実装の仕方になるかと思います。

ただ今回HTML部分はJQUERY.LIGHTPOPによって動的に生成されるので、必要な形式で生成されるようjsファイル側を書き直す必要がありました。

FLV Playerが必要とするソースは大体以下のような感じ

<object type="application/x-shockwave-flash" data="http://flv-player.net/medias/player_flv_maxi.swf" width="320" height="240">

<param name="movie" value="http://flv-player.net/medias/player_flv_maxi.swf" />

<param name="allowFullScreen" value="true" />

<param name="FlashVars" value="flv=http%3A//flv-player.net/medias/KyodaiNoGilga.flv&amp;autoplay=1&amp;autoload=1" />

</object>

ポイントは、FlashVarsへの値の渡し方で、flv=にFLVファイルへのパスを記述し、様々なパラメータは&ampでつないで渡します。それらが最終的にparamとして生成されるようJQUERY.LIGHTPOPのjsを調整します。

今回僕が使用したファイルはjquery.lightpop-0.8.5.jsです。該当箇所は121行からの以下の部分

arrParam = {flashvars:'movieURL=' + strSrc + '&autoStart=' + playerAutoPlay};

strSrc = settings.flvplayer + '?file=' + strSrc;

arrParamで生成するパラメータの値をきめ、strSrcには設定したFLVプレイヤーのswfファイル名が入ります。（FLVプレイヤー名はHTMLソースのほうで設定します）
こちらを以下のように書き直します。

arrParam = {FlashVars:'flv=' + strSrc + '&autoplay=1&autoload=1&showplayer=always'};

strSrc = settings.flvplayer;

FLV playerにflvファイルのパスを渡すために、flashvarsの値としてflv=ファイルへのパス&パラメータという書式で記述します。
strSrcのほうは、特にパラメータはいらないので後ろのfile=という記述を削除します。

jsファイルのほうはこれでアップしてOKです。

さて、JQUERY.LIGHTPOPを起動するHTMLのほうの記述にFLVプレイヤーを指定する箇所があります。

通常、head内に以下のような記述をすると思います。

<script type="text/javascript">

$(function() {

$('任意のセレクタ').lightpop({flvplayer:'player.swf'});

});

</script>

これを以下のように書き直します。

<script type="text/javascript">

$(function() {

$('任意のセレクタ').lightpop({flvplayer:'player_flv_maxi.swf'});

});

</script>

※ファイル名は、実際のファイルまでのパスを記述します

これで完了です。

FLV Playerには他にも様々なパラメータがありますが、Generatorで生成されるソース中のFlashVarsに追加される&以下の値を付け加えて行けばそれらの設定を反映することが可能です。

と、ここまで書いてなんなんですが、iPadだと結局再生はできないんですよね・・・。

動画に関してはFLVで固まったかと思われていましたが、appleによってひっくり返ってしまいまして、また複数環境で複数コーデックへの対応をする時代が来そうで、若干うんざりしています。

勝てば官軍なのはわかりますが、もう少しユーザーのこと考えてほしかったなあ、と思いました。