ホームページで、YouTube、WMP、SWF、MOV、WMVなどのサムネイル画像・文字をクリックして、
そのページ内で動画などを開く方法
[Mediabox] Lightbox for Media
Mediaboxは、lightbox系の動画メディアなどのコンテンツを再生するJavascriptである。
JSフレームワークにMooToolsを使用している。同じようなJavascriptに、画像も動画なども再生できるShadowboxがある。
 

Mediabox サンプル


YouTube

SWF

FLV

Quick Time mov

Windows Media player wmv

Flickr video

MetaCafe

Veoh

HP Yahoo!
ページ内の
<DIV>タグの内容
を表示する。
・・・・・

HP inline content
使用方法
1. ダウンロードしたmediaboxを解凍して、
 mediabox.js, mediabox.css, mootools.js, and swfobject.js などを、ページヘッダーに配置します。
 JS/CSSファイルのパスは、置いた場所により適宜変更します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
・・・
<link rel="stylesheet" href="./css/mediabox.css" type="text/css" media="screen">

<script src="./js/mootools-v1-11.js" type="text/javascript"></script>
<script src="./js/mediabox.js" type="text/javascript"></script>
<script src="./js/swfobject.js" type="text/javascript"></script>

</head>
 
  • mediaboxは、ローカルテスト用のアーカイブを使用すると一括でダウンロードできます。
    ≫ダウンロード(一括ダウンロードの直リンク)。
    mediabox関連ファイルを個別にダウンロードしたい場合は、mediaboxサイトでできます。
  • mediabox.cssは、画像のURLを持っています(imagesフォルダ参照)。カレントパスに修正します。
  • DOCTYPEは、例のように書きます。
 
2. リンクの方法

 動画などを再生させるためリンクは簡単です。リンクの形式には、AタグまたはJavascriptを用いる2つの方法があります。
<!--Aタグを用いる方法-->
<a href="link url" rel="mediabox[width height]" title="title" >link text</a>
<!--Javascriptを用いる方法1-->
<a href="javascript:Mediabox.open('link url', 'title', 'mediabox[width height]')">Click Here</a>
<!--Javascriptを用いる方法2-->
<body onload="Mediabox.open('link url', 'title', 'mediabox[width height]')" >
 
  • link url:リンクのURL。動画サイトの動画URL、自分のサイトにアップした動画(SWF,FLV,MOV,WMV)のURL、
    WebサイトのURL、ページ内のリンクIDなどを指定します。
  • width height:width横の長さとheight縦の長さ(ピクセル)を半角スペースで区切り、指定します。
    ポップアップ画面のスクリーンの大きさ。
  • title:任意のタイトルを書けます。
  • 例:
    <!-- YouTube サンプル①-->
    <a href="http://www.youtube.com/watch?v=ul7XSQPGGo4" rel="mediabox[480 380]" title="YouTube 私の未来のだんな様">

    <!-- 自サイトにアップしたFLV サンプル③-->
    <a href="../video/FLV-2007vfx.flv" rel="mediabox[640 360]" title="FLV">

    <!-- 自サイトにアップしたWMV サンプル⑤-->
    <a href="http://urbanqee.com/aflac/asfwaltz_pv300k.wmv" rel="mediabox[640 480]" title="WMV アヒルの学校">

    <!-- Webサイト Yahoo! サンプル⑨-->
    <a href="http://www.yahoo.co.jp/" rel="mediabox[640 480]" title="HP Yahoo!">
 
【留意事項】

  1. Myspaceは、動画のURLをつぎのように修正して使用します。(表示不能となりました 2010.4.23)
    http://vids.myspace.com/index.cfm?fuseaction=vids.individual&videoid=102187376
                                       ↓修正
    http://myspacetv.com/index.cfm?fuseaction=vids.individual&videoid=102187376
    
    ・play myspace ≫http://myspacetv.com/index.cfm?fuseaction=vids.individual&videoid=102187376
    
  2. Veohは、link URLをつぎのように修正して使用します。
    http://www.veoh.com/browse/videos/category/anime/watch/v19812840RJJbn9k5
                                      ↓修正
    http://www.veoh.com/videos/v19812840RJJbn9k5
               
    ・play Veoh ≫http://www.veoh.com/videos/v19734309bJkQ5hX7
    
  3. DailyMotionは、embed codeのURLを使用します。
    <div><object width="420" height="339"><param name="movie" value="http://www.dailymotion.com/swf/x2edp7" />
    <param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" />
    <embed src="http://www.dailymotion.com/swf/x2edp7" type="application/x-shockwave-flash" width="420" height="339" 
    allowFullScreen="true" allowScriptAccess="always"></embed></object>・・・略</div>
                      ↓URLをそのまま使用
    http://www.dailymotion.com/swf/x2edp7
               
    ・play dailymotion ≫http://www.dailymotion.com/swf/x2edp7
    
ダウンロード方法
Mediaboxは、iaian7.comから必要なファイルをダウンロードできます。
Mediaboxページ:http://iaian7.com/webcode/Mediabox
  • mediabox.js, mediabox.css,mediaboxImagesファイル
  • mootools.js, swfobject.js
  • slimbox.js など
 
必要なファイルを個別にダウンロードすると、mootools.jsが上手く動作しない場合があるので、
ローカルテスト用のアーカイブをダウンロードすると便利です。どうも、mootools.jsのバージョンがV1.2だと使えないらしい?
  • Mediaboxページの「Installation」内のtest setupをクリックすると、必要なファイルを一括してダウンロードできます。
  • ローカルテスト用のアーカイブにはつぎのファイルが含まれています。(こちらのmootools.jsのバージョンはV1.1)
    \mediabox72\mediabox72
      |---[css]
      |      |---mediabox.css
      |
      |---[images]
      |---[js]
      |     |---mediabox.js
      |     |---mootools.v1.11.js
      |     |---swfobject.js
    
    

Lightbox系メディアビューア(まとめ)
NoビューアーJSフレームワーク画像動画*1動画共有サイト動画Webページスライドシュー備考
1LightboxPrototype
2PiroboxjQuery推奨
3Videoboxmootools
4Mediaboxmootools
5ShadowboxPrototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、 Yahoo! User Interface Library、 Ext (requires ext-core.js)、 非JSフレームを選択可 ●*2推奨
※動画とは、SWF、FLV、MOV、WMV(*1)
※Shadowboxのスライドショーは、画像、動画などなんでも可能(*2)
動画関連サイト内リンク


  最終更新日:2010.2.6