記事一覧

Slimbox風にムービーを表示

ファイル 141-1.jpg

以前Slimboxの設置を解説しましたが、スクリプトを追加すると
動画もSlimboxと同じように表示することができます。

表示可能な動画はYoutubeMetacafeGoogle VideoiFilm
オリジナルのflash(.swf)も表示することができます。
JW FLV PLAYERと併用することで、flvファイルの再生も可能になっています。
(注:ニコニコ動画のようにログイン必須の動画サイトからは無理)

表示にはSlimboxのときと同じmootoolsを使います。
こちらのvideoboxは1つのパックの中に必要なもの(js、player)が
全て入っているため、設置がとても簡単なのも魅力です。

【参考元】 ※動作サンプルは最初のサイトにて
・Videobox: Lightbox for videos
・【ハウツー】ゼロからはじめるVideobox - Flashムービーにエフェクト効果

続き

Videoboxの設置法

必要ファイルのダウンロード

1.Download - videobox v1.1 より、videobox_1.1.zipを
  ダウンロードします。(SourceForge.netに繋がります)

ファイル 141-2.jpg

2.videobox_1.1.zipを解凍します。

videobox
 ├ js  ┬ mootools.js
 │    ├ videobox.js
 |    └ swfobect.js
 ├ css ┬ videobox.css
 |    ├ closelabel.gif
 |    └ loading.gif
 └ swf ─ flvplayer.swf

 以上のファイルを確認してください。

jsファイルの設置・簡単な使い方

1.「diarypro/skin」フォルダ内に
 「js」「css」「swf」3つのフォルダを丸ごと入れてください。

skin
 ├ js ┬ mootools.js
 |    ├ videobox.js
 |    └ swfobect.js
 ├ css ┬ videobox.css
 |    ├ closelabel.gif
 |    └ loading.gif
 └ swf ─ flvplayer.swf

 となっていればOKです。

2・header.htmlの<head>~</hrad>内に次のソースを挿入。

<link rel="stylesheet" href="${INFO_URL}skin/css/videobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="${INFO_URL}skin/js/mootools.js"></script>
<script type="text/javascript" src="${INFO_URL}skin/js/videobox.js"></script>
<script type="text/javascript" src="${INFO_URL}skin/js/swfobject.js"></script>

3.slimbox風に表示したい動画へのリンクを次のように記述。

<a href="http://www.youtube.com/watch?v=????????????" rel="vidbox" title="動画の説明">Youtube動画ここから</a>

 文字のリンクを押すと、動画がslimbox風に表示されます。
 titleの中身が説明として動画左下に表示されます。
 リンクをサムネイルにしたい場合は、サムネイルの<img ~>を
 <a href="URL" rel="vidbox">~</a>で囲ってください。

4.rel="vidbox 800 600" ようにタグに表記すると、
  動画のサイズが記入した大きさで固定されます。
   rel="vidbox 横幅 高さ"で好きなように設定できます。

自作フラッシュを表示するには

1.Flashファイル(.swf)をファイル1としてアップロードする。
  サムネイルを使う場合、画像をファイル2としてアップロード。

2.記事内に次のように記述。

<a href="$FILE1_path" rel="vidbox" title="ファイル1">$FILE2</a>

すでにmootoolsをブログに導入済みの場合

MooTools.Packitoというサイトで、現在使っているmootoolsの
依存コンポネートを調べることができます。
使いたいjsファイルをアップロード後、そのjsファイルのURLを記入すると
動かすのに必要なmootoolsコンポネートが一覧表示されます。

 【参考元】
・MooToolsの依存コンポーネントをチェックする 
 (MooTools.Packito) - youmos

 
それぞれをメモし、あたらしくmootools から必要な分だけ
チェックしてダウンロードすれば、ファイルの重さも節約できます。

はじめから全てにチェックを入れてダウンロードした、という方は
ダウンロードし直さなくともOKです。
「diarypro/skin」直下にmootools.jsがある場合、「js」フォルダを
新しく作り、そちらにvideobox.jsらとともに移動させてください。

トラックバック

この記事のトラックバックURL
http://brutzero.s22.xrea.com/rb/diary-tb.cgi/141

TRACKBACK

Videoboxの導入 from B.H.S.V Blog
このブログ(Web Diary Professional)にサムネイルをクリックすると同一ページ上に動画を表示する「Videobox」なるものを導入し、いろいろテストしてみた。参考ページ:Right Bower動画はクリスマ...
2010/01/21(木)11時34分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2014/07/31(木)02時07分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/26(月)09時01分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/10(金)18時56分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/05/23(土)08時58分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/17(日)21時21分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/23(土)09時52分 受信