動画をLightbox風に見せる「Mediabox」を使ってみた!

【この記事の所要時間 : 約 5 分

mediabox_01.gif
mediaboxのテスト
サイトに動画をUPしたいと思っていろいろ調べてみると、「Mediabox」なるジャバスクリプトがあることを知る。「Videobox」というものもあるが、「Mediabox」の方が多くの拡張子に対応していて良いとのこと。
Mediaboxは、各種ビデオをLightboxに表示することのできるJavaScriptライブラリなので、いくつかのJSファイルとプレーヤーをサーバに取り込んでおけばいいみたい。
旧式が「Mediabox」で、最新式が「MediaboxAdvanced」という名前。
まず本ブログに組み込もうと思って、上記の「MediaboxAdvanced」のリンク先のサイトを参考にした。

配布サイトから以下をダウンロードします。
* mediaboxAdvanced 1.1.7 (39kb)
* mediaboxAdvanced Black Theme(黒をテーマとしたCSS)または
* mediaboxAdvanced White Theme(白をテーマとしたCSS)
* mediaboxAdvanced Image Pack(上記Black Theme、White Themeのimageを含む)
MooToolsが必須で、Flashビデオ(FLV or MP4)を再生させる場合はJW Media Player または NonverBlasterが必要です。
* MooTools 1.2.4 Core (65kb) 必須
* JW Media Player または NonverBlaster ※
※NonverBlasterのほうがシンプルでcommercial licensingも必要ないのでおススメです。

プレーヤーは、オススメされているNonverBlasterの方を使うことにした。しかしながら、うまくいかない。なぜだろうと試行錯誤しながらやっていると、既存で利用していた prototype.js と 今回のmediaboxで使っている mootools がコンフリクトを起こしていた。なんとか併用したいと考えて調べてみると・・・
水銀blog: Mediabox JS

写真用に使用していたLightbox用のprototype.jsとmootools,jsがコンフリクトをおこすため併用できないというのがわからずに苦労しました。

prototype.jsとmootoolsのライブラリ併用時のコンフリクト

prototype.jsとmootoolsのライブラリ併用時のコンフリクトの件。オフィシャルフォーラムとかGoogleディスカッショングループも検索してみましたが、対応は不可能な模様。「併存できないから、どちらかを諦めろ」が結論みたい。

とのことで、結論としては、prototype.jsとmootoolsのライブラリは併用できないということらしい。オフィシャルフォーラムでは、以下のように書かれているとのこと。

Short and sweet answer is that you just can’t.

ということで、とりあえず、prototype.jsを読み込むのをやめてみると、mediaboxがうまく稼動!!と思っていたら、mediaboxにYouTubeの動画を取り込んだり、画像を取り込んでLightbox風にするのはうまくいくのに、自分のサーバにおいたflvを読み込むとうまくいかない・・・・
ということで調べてみると、ポイントは、mediaboxAdv-1.1.7.jsに記述されているNonverBlaster.swfのパス。参考サイトには、「FLVファイルからの相対パス」と書かれていたが、これはたぶん勘違いかと思う。実際は、「ビデオファイルへのリンクを記述しているページからの相対パス または 絶対パス(URLもOK)」かと思う。このあたりちょっと悩んだがたぶんそれであってるハズ。もし、mediaboxの設置で悩んでいる人(そうあなた!)は試してみてほしい。
NonverBlasterではなく、JW Media Playerを使いたいという人は、JW Media Playerのサイトからダウンロードできるファイルの中から player.swf というものを NonverBlaster.swf と同じ階層において、mediaboxAdv-1.1.7.js に記述されている useNB の部分を、false にして、playerpath に player.swf のパスを記述すれば、mediabox で利用されるプレーヤーが、JW Media Playerに変更になる。
Gigazine – Lightbox風にムービーを表示する「Videobox」
ムービーにLightbox効果を ~ Mediaboxを使ってみる
Mediaboxの利用方法として以下のサイトが参考になる。
CSS Layout – MediaBoxでファイル表示
より詳しく知りたい方はこちらへ

スポンサーリンク
レクタングル(大)広告
  • このエントリーをはてなブックマークに追加
スポンサーリンク
レクタングル(大)広告

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です