[WordPress] FlowPlayer の使い方 -その3-

投稿日: 2010/02/25 作成者: ladyoss

今回は、Flowplayer を <div></div> タグで使う方法です。
別に <a></a> タグでも全く問題ないのですけどね。。
正直、いたって簡単です。

1. <div></div> 対応

前回使った下記のコードを元に書き換えます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
a.class名 {	
	margin-top:40px;
	display:block;
	/*background:url(スプラッシュイメージへのパス/画像.png) no-repeat; */
	width:480px;
	height:292px;
	padding:0 75px 75px 75px;	
	text-align:center;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
}
</style>
1
2
3
4
5
6
7
8
9
10
<a id="id 名" class="class名"></a>
<script language="JavaScript"> 
$f("player", "/path/to/the/flowplayer-3.1.5.swf",{
	clip: {
		url: '/path/to/the/動画.flv',
		autoPlay: false,
		autoBuffering: true
		}
	});
</script>
1-1) style sheet の書き換え

上記のコードの 2 行目を書き換えるだけです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
div.class名 {
	margin-top:40px;
	display:block;
	/*background:url(スプラッシュイメージへのパス/画像.png) no-repeat; */
	width:480px;
	height:292px;
	padding:0 75px 75px 75px;	
	text-align:center;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
}
</style>
a.class 名を div.class 名にしただけです。
正直 a とか div とか付けなくても問題ないっす。。(笑)
あー、ちなみに、
style sheet 内の各数値は、それぞれのページに合わせてくださいね。

1-2) 記事中の本体の書き換え

ここも下記 1 行目のように書き換えるだけです。
1
2
3
4
5
6
7
8
9
10
<div id="id 名" class="class 名"></div>
<script language="JavaScript"> 
$f("id 名", "/path/to/the/flowplayer-3.1.5.swf",{
	clip: {
		url: '/path/to/the/動画.flv',
		autoPlay: false,
		autoBuffering: true
		}
	});
</script>
<a></a> を <div></div> タグに変えただけです。

1-3) 余談

余談なのですが、自分の備忘録として。
<a></a> や <div></div> などに入れる
id/class プロパティと style sheet について。

Flowplayer でも使うこのプロパティには一定のルールあり。
id プロパティを使う場合、css には #id 名で記述する。
class プロパティを使う場合は .class 名で記述する。
ちなみに、記述中身が同じだった場合、効果は同じだったりする。

では、違いは？というと、下記の通り。
id はページ内に1回しか出てこない場合 に使う。
class はページ内で何回も出てくる場合 に使う。

つまり、全部 class で統一して書いても効果は同じなので
実は問題はなかったりするが
複雑なページになってくると class だけだと意味不明になりかねないので
id と class プロパティを使い分けるのが重要。

しかし、Flowplayer の場合は、id と class には違いがある。
id はプレーヤー本体の呼び出し に、
class は幅や高さなどの style の呼び出し に、
それぞれ使っている。
よってもって、
画角の違う動画などは style sheet でそれぞれに適切な style を複数作り
呼び出す class プロパティを使い分ける事で style を変えていく、という使い方になる。

今回はここまでー。

関連する投稿

カテゴリー: FlowPlayer タグ: FlowPlayer この投稿のパーマリンク

コメントをどうぞコメントをキャンセル