Mediabox の QuickTime( .mov , .m4v 等)対応

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

ちょうど1年ほど前に、動画をLightbox風に見せるJSである「Mediabox」について書いたが、
動画をLightbox風に見せる「Mediabox」を使ってみた!

サイトに動画をUPしたいと思っていろいろ調べてみると、「Mediabox」なるジャバスクリプトがあることを知る。「Videobox」というものもあるが、「Mediabox」の方が多くの拡張子に対応していて良いとのこと。

QuickTimeファイルに対応する必要があって、久しぶりに参考サイトをのぞいたら、Ver.1.2.0よりQuicktimeに対応したという情報があったので、早速対応してみた。
新しく以下のファイルをダウンロードしてくる。
・mediaboxAdv-1.2.0.js
・Quickie.js
そして、mediaboxAdv-1.1.7.js の「JW Media Player settings and options」または、「NonverBlaster」の部分で修正した部分(NBpathとかね)を mediaboxAdv-1.2.0.js へも反映させた上でサーバーへUP。
あとは、HEAD要素に上記JSが読み込まれるように修正、追記し、さらに参考サイトにもあるように、IE用にHEAD要素内におまじないを追記して完成。mediaboxテストページにて動作確認して、OK。
配布元では、mediaboxAdvanced 1.3.4 が最新バージョンとなっていたが、IE 8 でバグが出ているみたいで 1.2.5を使えと書いていた。とりあえず、参考サイトが、1.2.0だったので、1.2.0にしておいた。
で、今回のポイントだったQuickTimeであるが、配布サイトには以下のように書いてあった。

Files playable with Quicktime (.mov, ,m4v, .m4a, and many others) can use the native QT browser plugin if the MooTools plugin Quickie.js is installed

実際、JSのファイルを見たところ、.mov、.m4v、.m4a、.aiff、.avi、.caf、.dv、.mid、.m3u、.mp3、.mp2、.mp4、.qtz に対応しているようだった。OperaとMacでCromeを使った場合、不具合がでるらしい。
読んでいて、もしかしたら他の人がはまるかもと思った部分は、以下の部分である。

Quickie.js, the helper script for handling QuickTime media, has not been updated to use MooTools 1.3 yet.

QuickTimeに対応するためにQuickie.jsを導入したが、このJSがMooTools 1.3にまだ対応していないようなので、MooTools 1.3を使っている場合は注意してほしい。MooTools 1.2系に落とすとか。
1年前にMediaboxを導入する際に以下のように書いておいたら

自分のサーバにおいたflvを読み込むとうまくいかない・・・・
ということで調べてみると、ポイントは、mediaboxAdv-1.1.7.jsに記述されているNonverBlaster.swfのパス。参考サイトには、「FLVファイルからの相対パス」と書かれていたが、これはたぶん勘違いかと思う。実際は、「ビデオファイルへのリンクを記述しているページからの相対パス または 絶対パス(URLもOK)」かと思う。このあたりちょっと悩んだがたぶんそれであってるハズ。もし、mediaboxの設置で悩んでいる人(そうあなた!)は試してみてほしい。

参考サイトの方で修正してもらっていた。

と、FLVファイルFLVファイルを記述したHTMLファイルからの相対パスに変更します。
ここでは相対パスにしましたが、サイト内にmediaboxを一つだけ設置し、HTMLは色々なディレクトリに設置する場合は絶対パス(/で始まるパスURL)にしたほうがいいでしょう。
※上記間違いを修正しました(2010.4.13)。 canalize.jpさん、ありがとうございました。

すばらしい対応ですね。
こちらこそ、参考にさせて頂きありがとうございます。
配布元には、「Scripting and link alternatives」として、ajaxやframe、flash、flexなどでの使い方なども書かれていて参考になる。導入の基本的な部分は、参考サイトの「Mediabox Advanced のデモ、検証」をチェックして、使い方や細かい部分は、配布元をチェックすればいいでしょう。
以下、過去記事。
動画をLightbox風に見せる「Mediabox」を使ってみた!
mediabox と zoomify でチラシ風写真をつくる

QuickTime GuideBook
QuickTime GuideBook

posted with amazlet at 15.11.19
姉歯 康
ビーエヌエヌ新社
売り上げランキング: 1,077,988
スポンサーリンク
レクタングル(大)広告
  • このエントリーをはてなブックマークに追加
スポンサーリンク
レクタングル(大)広告

コメントをどうぞ

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