2010年11月22日


Shadowbox.js 3.0.3 の正統な使い方 〜 flv 動画を表示する

Shdowbox では、パッケージに JW Player の 4.5 が同梱されています。ですから、
flashVars のパラメータは、Setup Wizard | LongTail Video | Home of the JW Player
を参照して下さい。

一般的には、autoplayMovies を false にした時に表示する画像として image が
必要になり、その画像は動画が全て終了した時も使われます。もし、比較的長い動画
で autoplayMovies を true にするのならば、addCache では無く A タグのみ
で設置可能です。

※ autoplayMovies を false にする必要がある場合は、開いても真っ黒なので画像が
※ 必要になります。その場合は addCache を使います

他の flv プレーヤーを使いたい場合は、player.swf にリネームしたファイルと交換
するだけで利用できるはずです。
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js" charset="utf-8"></script>
<a id="sbx1290242586765" href="http://lightbox.on.coocan.jp/image/8377811.flv" title="甥っ子のソーラーバッタ"><img src="http://lightbox.on.coocan.jp/image/8377811.jpg" style='border:solid 0px #000000'></a>
<script type="text/javascript">
Shadowbox.addCache(document.getElementById("sbx1290242586765"),{
	player: 'flv', 
	width: 800,
	height: 600, 
	autoplayMovies: false,
	flashVars: { 
		image: 'http://lightbox.on.coocan.jp/image/8377811.jpg'
	}
});
</script>

<a rel="shadowbox;width=800;height=600;" title='甥っ子のソーラーバッタ' href="http://lightbox.on.coocan.jp/image/8377811.flv"><img src="http://lightbox.on.coocan.jp/image/8377811.jpg" style='border:solid 0px #000000'></a>
addCache





HTMLのみ





Shadowbox.js 3.0.3 の正統な使い方

(1) ダウンロード、setup メソッドで事前にギャラリーを定義
(2) YouTube の動画を表示する
(3) 大きな画像を表示する
(4) Windows Media Player を正しく使えるようにする
(5) flv 動画を表示する


posted by at 2010-11-22 17:37 | Comment(6) | Shadowbox | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Loading
この記事へのコメント
初めまして。
ShdowboxでFLV動画を表示する手法を探しましたところ、このサイトに辿り着けました。
これを参考に作成したところ成功しました。けど、バーなどが緑色になっています。自分で代えることはできるのでしょうか?またロード中に「読込中」の文字を削除する方法も教えて下さい。
宜しくお願いします。
Posted by Shdowbox at 2012年06月11日 16:28
バーはJW Playerの事ですよね?
http://www.longtailvideo.com/support/jw-player-setup-wizard?example=1
へ行って、color で調整してチェックして下さい。

読み込み中は
<style>
#sb-loading-inner span {color:#000;}
</style>
で消える(黒くしただけ)でしょう
※ shadowbox.css を見て下さい
Posted by lightbox at 2012年06月12日 00:29
返事をありがとうございます。
はい、バーはJW Playerのことです。 説明不足ですみません。
指示通りサイトへ行ってcolrで調整しました。
'frontcolor': 'FF0000',
これをHTMLのどの辺りに入れたら良いでしょうか?

<script type='text/javascript' src='jwplayer.js'></script>
のjwplayer.jsをダウンロードしないといけないのでしょうか?
JW PlayerのサイトとこのサイトのHTMLソースが違うのでどうすれば良いか分らないので…
もしかして私の手順がまずいのかも知れませんが…
私はこのサイトのソースをコピーペーストし、CSSやJSファイル、画像や動画をダウンロードして作成しました。それが間違っておりますか?

読込中ですが、文字そのものを消すことは不可ってことでしょうか?
宜しくお願いします。
Posted by Shdowbox at 2012年06月12日 09:53
'backcolor': '000000',
'frontcolor': '000000',
'lightcolor': '000000',
'screencolor': '000000'

ここれらは、FlashVars に指定します。

Shadowbox.addCache(document.getElementById("sbx1290242586765"),{
player: 'flv',
width: 800,
height: 600,
autoplayMovies: false,
flashVars: {
image: 'http://lightbox.on.coocan.jp/image/8377811.jpg',
'backcolor': '000000',
'frontcolor': '000000',
'lightcolor': '000000',
'screencolor': '000000'
}
});

という感じです。

文字そのものはたぶん Unicode でjs に埋め込まれていると思われます。

消すようなオプションは無いので一番簡単な方法は CSSです。読み込み中の gif も同時に消すのなら、display:none でなにも見えなくなります。
Posted by lightbox at 2012年06月12日 13:23
アドバイスをありがとうございます。
下記のように書き換えましたが、ダメでした。バーが緑色のままになっています。
他に方法があると思いますので調べてみます。
読込中の文字については了解致しました。
色々とありがとうございました。

Shadowbox.addCache(document.getElementById("sbx1290242586765"),{
player: 'flv',
width: 800,
height: 600,
autoplayMovies: false,
flashVars: {
flashVars: {
image: 'image/8377811.jpg',
'backcolor': '000000',
'frontcolor': '000000',
'lightcolor': '000000',
'screencolor': '000000'
}
}
});

一応作成したソースを載せます。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shadowbox.js 3.0.3 の正統な使い方 〜 flv 動画を表示する :WEB 職人</title>
<link rel="stylesheet" type="text/css" href="sbx33/shadowbox.css">
<script type="text/javascript" src="sbx33/shadowbox.js" charset="utf-8"></script>
<script type="text/javascript">
Shadowbox.init(
{
counterLimit:20,
overlayColor:'#000000',
overlayOpacity:0.6
},
function () {
Shadowbox.setup("a.ggpano", {
gallery: "ggpano",
width: 800,
height: 600,
continuous: true,
counterType:"skip"
});
Shadowbox.setup("a.expage", {
overlayColor: "#123456",
width: 1075,
gallery: "expage",
continuous: true,
counterType:"skip"
});
});
</script>
</head>
<body>
<script type="text/javascript" src="sbx33/loadShadowbox.js" charset="utf-8"></script>
<a id="sbx1290242586765" href="images/8377811.flv" title="甥っ子のソーラーバッタ"><img src="image/8377811.jpg" style='border:solid 0px #000000'></a>
<script type="text/javascript">
Shadowbox.addCache(document.getElementById("sbx1290242586765"),{
player: 'flv',
width: 800,
height: 600,
autoplayMovies: false,
flashVars: {
flashVars: {
image: 'image/8377811.jpg',
'backcolor': '000000',
'frontcolor': '000000',
'lightcolor': '000000',
'screencolor': '000000'
}
}
});
</script>
<a rel="shadowbox;width=800;height=600;" title='甥っ子のソーラーバッタ' href="images/8377811.flv"><img src="images/8377811.jpg"></a>
</body>
</html>
Posted by Shdowbox at 2012年06月13日 10:10
FlashVars の書き方が間違っています
メールを送りました。
Posted by lightbox at 2012年06月13日 20:54
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。