Mediabox 0.7.3

MediaboxはWindows Media(WMV)QuickTime、FlashビデオなどをLightbox風に表示・再生できるJavaScriptです。

最新版はMediaboxAdvancedですが、WMVが再生できませんでした。
仕事でどうしてもWMVを再生させる必要があったため、同様のニーズのある人のために、旧バージョンの設置方法を紹介します。

最新版のMediaboxAdvancedの設置デモはこちらを御覧下さい。

MediaboxはMooToolsも必要ですが、ここではMediaboxの旧バージョンに合わせてMooToolsも旧バージョンをアップしています。

名称
Mediabox(※現在はMediaboxAdvanced)
配布元
iaian7
必要なモジュール
MooTools
動作確認ブラウザ
配布元サイトにも記載されていますが、Windows Media(WMV)は部分的にしかサポートされていないようです。IE7では正常に動作しないようなことも書かれていますが、私の環境やクライアントの環境でも特に問題なく動作しました。(ただcloseボタンを押しても動画が閉じるのに時間がかかる)
Firefoxなど他のブラウザでは再生はされるものの、停止や再生などのコントローラが表示されません。
WindowsのOpera 9やSafari 3ではクラッシュ、Mac OSXのSafariでは時々停止するようです。(WindowsのOpera 10では問題ありませんでした)

デモ

ちなみにQuickTimeはこちら

ダウンロード

  1. iaian7にアクセスすると同時にmediaboxが動作し、ウィンドウが表示されるので、「close」をクリックしてください。
    ※「close」以外の部分をクリックするとMediaboxAdvancedのページが表示されるのでご注意ください。
  2. 以下の3つのファイルをダウンロードしてください。
    • mediabox73.js version 0.7.3 Beta (about 23kb)
    • mediabox.css (this CSS also contains the necessary styling for Slimbox, see below)
    • mediaboxImages.zip (includes matching images for Slimbox)
  3. MooToolsが必要ですが、Mediaboxの旧バージョンに合わせてMooToolsも旧バージョン1.11を使用しています。(バージョン1.2.1で試しましたが、動作しませんでした)
    旧バージョンはGoogle Ajax Libraries API. を使うことができます。
    またこのサイト内にも置いています。→mootools-1.11.js

設置方法

  1. 各ファイルのパスは、ここでは以下の場合で説明します。
    [設置フォルダ]
     ├ mediabox.css
     ├ mootools-1.11.js
     ├ mediabox73.js
     └ [mediaboximages]
  2. HEAD要素内に以下を記述します。
    各ファイルへのパスは環境に合わせて書き換えてください。
    <script src="mootools-1.11.js" type="text/javascript"></script>
    	<script src="mediabox73.js" type="text/javascript"></script>
    	<link rel="stylesheet" href="mediabox.css" media="screen" />
  3. BODY要素内にプレビュー画像とビデオファイルへのリンクを記述します。
    <p><a href="demo.wmv" rel="mediabox[320 240]"><img src="preview.jpg" alt="プレビュー画像"></a></p>
  4. rel="mediabox[320 240]"mediaboxは変更しないでください。[320 240]はビデオの幅と高さを設定します。
  5. mediabox.cssでは画像ファイルへのパスがurl(/images/1_prev.png)となっているので、設置環境に合わせて変更します。(19,、40、48、66行目)

ページトップに戻る