記事一覧

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らとともに移動させてください。

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分 受信

COMMENT

■通りすがり ... 2008/08/10(日) edit・delete

こんにちわ、初めまして。
JW FLV PLAYERと併用して自作のFLVを
再生したいのですが、宜しければ
手順などを解説して頂けないでしょうか。

■kiriji ... 2008/12/17(水) edit・delete

>通りすがりさん
返信が遅れてしまいましたが、はじめまして。
JW FLV PLAYERの使用法は英語ですが、
必要な箇所さえ分かればなんとかなりそうだったので
説明を省略させていただいておりました。
時間があれば…としかご返答できないのが心苦しいのですが、
もしその後設置が上手くいかないようでしたら、またご質問ください。

■未承認 ... 2014/07/06(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/06(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/07(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/08(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/26(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/29(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/08/01(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/08/01(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/21(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/21(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/22(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/22(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/22(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/22(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/23(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/23(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/24(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/24(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/25(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/25(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/27(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/14(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/17(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/19(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/23(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/03/02(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/03/04(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/03/05(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/03/14(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/03/15(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/04/09(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/05/26(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/05/31(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/06/18(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/06/18(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/06/18(木) edit・delete

管理者に承認されるまで内容は表示されません。

■非公開 ... 2015/06/26(金) edit・delete

管理者にのみ公開されます。

■未承認 ... 2015/06/26(金) edit・delete

管理者に承認されるまで内容は表示されません。

■非公開 ... 2015/07/03(金) edit・delete

管理者にのみ公開されます。

■非公開 ... 2015/07/07(火) edit・delete

管理者にのみ公開されます。

■非公開 ... 2015/07/27(月) edit・delete

管理者にのみ公開されます。

■非公開 ... 2015/07/31(金) edit・delete

管理者にのみ公開されます。

■非公開 ... 2015/08/11(火) edit・delete

管理者にのみ公開されます。

■非公開 ... 2015/08/17(月) edit・delete

管理者にのみ公開されます。

■非公開 ... 2015/09/02(水) edit・delete

管理者にのみ公開されます。

■未承認 ... 2015/09/03(木) edit・delete

管理者に承認されるまで内容は表示されません。

■非公開 ... 2015/09/15(火) edit・delete

管理者にのみ公開されます。

■非公開 ... 2015/10/01(木) edit・delete

管理者にのみ公開されます。

■非公開 ... 2015/10/01(木) edit・delete

管理者にのみ公開されます。

■非公開 ... 2015/10/06(火) edit・delete

管理者にのみ公開されます。

■非公開 ... 2015/12/28(月) edit・delete

管理者にのみ公開されます。

■非公開 ... 2016/02/03(水) edit・delete

管理者にのみ公開されます。

■非公開 ... 2016/02/12(金) edit・delete

管理者にのみ公開されます。

■非公開 ... 2016/02/23(火) edit・delete

管理者にのみ公開されます。

■未承認 ... 2016/02/24(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2016/03/02(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2016/03/05(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2016/10/20(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2017/03/12(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2017/03/13(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2020/04/02(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2020/05/12(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2020/05/28(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2020/06/08(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2020/08/05(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2020/09/03(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2021/12/08(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/11/30(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/11/30(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/12/01(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/12/03(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/12/13(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2023/04/30(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2023/05/15(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2023/05/18(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2023/06/03(土) edit・delete

管理者に承認されるまで内容は表示されません。