Webデザインの記事一覧 « | AirNX 開発者ブログ

スローライフな旅 AirNX »
開発者ブログ »
Webデザインの記事一覧

オープンソースのWEB用FLVプレーヤー FlowPlayer

Web上で動画を再生する方法はいくつかありますが、wmvやrmによる方法は環境によっては見れないことがあります。特にMacではwmvはFlip4Macを使うことで観覧可能になりますが、このことを理解してFlip4Macをインストールしている人はMacユーザーの中で何割程度でしょう？　リアルメディアについてもWindows、Mac両方とも最初からインストールされているわけではありません。

誰もがパソコンを買ったままの状態で、自然に動画を再生出来る確率が高いのは、やはりFlashを用いた方法です。swfの動画プレーヤーからFLVもしくはMP4（h.264）を呼び出して再生させれば、wmvやrmを使った方法よりも圧倒的に観覧者の層が増えます。特にMP4（h.264）は画質も良いため現状、動画をWebで配信するのには一番ベターな方法だと思います。

手軽なのはYouTubeなどの動画共有サイトにアカウントを作り、その動画をWebページに貼付けることですが、どうしても自分のサーバーから動画を配信したい場合はswfの動画プレーヤーが必要になります。そこで今回ご紹介するのが『FlowPlayer』です。

AirNXでは当初『JW Player』を使用していましたが、非商用のみ無料のため、アフィリエイトを張る場合ライセンス料が必要になること、そのライセンス料がなかなか高いことが引っかかり、使用を中止しました。そこで見つけたのが『FlowPlayer』です。

『FlowPlayer』はGPLで配布されています。有料版もありますが、無料版でもページを読み込んだ時とフルスクリーンにした時にロゴが表示されるだけで、商用サイトにも使用可能です。

使用方法は『JW Player』に比べると、ややこしいのですが、慣れてしまえば自由度が高く、そのややこしさを補ってとても優れものであることが分かります。

手順1

まずは『FlowPlayer』右上の「Download now」を押して一番左、GPL license (Free)をダウンロードします。

解凍して、「flowplayer-3.1.5.swf」と「flowplayer.controls-3.1.5.swf」、そしてexampleフォルダの中にある「flowplayer-3.1.4.min.js」をサーバーにアップロードします。

htmlの<head>〜</head>内に以下を記述します。

path/to/the/をご自分のサイトに合わせて編集して下さい。

手順2

『FlowPrayer』は通常aタグやdivで呼び出します。以下はaタグの方法です。
動画はflvもしくはh.264コーデックのMP4を指定出来ます。

<a
href="http://vod01.netdna.com/vod/demo.flowplayer/flowplayer-700.flv"
style="display:block;width:425px;height:300px;"
id="player">
</a>

青文字の部分は動画のアドレスを指定して下さい。
その下に『FlowPlayer』を動作させるのに必要なJavascriptを書きます。

path/to/the/をご自分のサイトに合わせて編集して下さい。
以上で最低限の動作はすると思います。
その他の設置例については公式サイトにてご確認下さい。

objectタグで読み込む

さて、長い前置きでしたが実はここからが本題です。
『FlowPlayer』をaタグやdivではなくobjectタグで読み込むにはどうするのか？　気になったので調べてみたら公式サイトにその方法が載っていました。

<object id="flowplayer" width="300" height="200" data="http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf"
type="application/x-shockwave-flash">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"clip":"http://blip.tv/file/get/N8inpasadena-Flowers457.flv"}' />
</object>

これでobjectタグでの『FlowPlayer』の読み込みが出来ます。
青文字の部分は環境に合わせて変更して下さい。

サムネイル指定と配色

objectタグで読み込みは出来ましたがこのままではデザインがデフォルトのままです。また動画のサムネイルも指定出来ません。サイトにマッチするように少し手を入れてみましょう。

<object class="left player" width="300（横サイズ）" height="200（縦サイズ）" data=";http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf"
type="application/x-shockwave-flash">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf" />
<param name="bgcolor" value="#000000" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"playlist":["サムネイル画像のURL",{"url":"動画のURL","scaling":"fit","autoPlay":false}],"plugins":{"controls":{"autoHide":"always","timeColor":"#ffffff","volumeSliderColor":"#333333","sliderColor":"#333333","backgroundGradient":"low","backgroundColor":"#c9c9c9","buttonColor":"#999999","progressGradient":"none","buttonOverColor":"#728B94"}}}' />
</object>

"timeColor":"#ffffff"で再生時間を白にしています。
"volumeSliderColor":"#333333"でボリュームスライダー部分を黒にしています。
"sliderColor":"#333333"でプログレスバーを黒にしています。
"backgroundGradient":"low"で背景のグラデーションを控えめにしています。
"backgroundColor":"#c9c9c9"でコントローラーを白っぽくしています。
"buttonColor":"#999999"で再生ボタン、ミュートボタン、フルスクリーンボタンをグレーにしています。
"progressGradient":"none"でプログレスバーのグラデーションをなくしています。
"buttonOverColor":"#728B94"でボタンにオンマウスした時の色を水色にしています。
"autoHide":"always"によって一定時間後コントローラーが自動で隠れます。常時表示にする場合はこの記述を消して下さい（常時表示にする場合はコントローラーの分の長さが必要になるため動画の縦サイズにプラス24px必要です。）

サンプルページ

最後に、日本語で分かりやすく解説して下さっているサイトをご紹介します。
こちらの記事には大変お世話になりました。

『Blog 内に FLV / H.264 動画埋め込み Flowplayer 3 の設定』

« 元に戻す

<br style="clear:both;" /> を使わないfloatクリア（IE対応）

複雑なデザインのサイトをコーディングしていてfloatを多用すると、クリアするのをを忘れたりすることがあって、その原因を探すのに無駄な時間を使ってしまうことがあります。floatをクリアする方法として一番楽なのは<br style="clear:both;" />を用いた方法です。しかしこの方法も完璧ではありません。例えばリストを使った時などです。

<div>〜</div>の中でfloatをクリアするのはさほど難しくありません。
floatした後続の要素でクリアすれば良いだけです。

html

<div>
<img src="写真">
<p id="date">撮影日時</p>
<p>テキスト</p>
</div>

css

div img{
float: left;
}
div #date{
float: right;
}
div p{
clear: both;
}

もし後続する要素がなくても<br style="clear:both;" />を一番下に書き込めば良いだけです。例えば以下のように。

<div>
<img src="写真">
<p id="date">撮影日時</p>
<br style="clear:both;" />
</div>

しかし以下のようなhtmlとcssを書いた場合、floatをクリアするにはどうしますか？

html

<ul>
<li>リスト1<l/i>
<li>リスト2<l/i>
<li>リスト3<l/i>
</ul>

css

ul li{
float: left;
}

FirefoxやSafariで見るぶんにはafter擬似要素でクリアするだけで良いのですが、IE6、7のことを考えるとそうもいきません。そこでhtmlに通常は必要のない無駄な記述を追加することになります。

<ul>
<li>リスト1<l/i>
<li>リスト2<l/i>
<li>リスト3<l/i>
<li style="display: none;"><br style="clear:both;" /></li>
</ul>

<br style="clear:both;" />を<ul>〜</ul>内に直接書くことは出来ませんのでこのような面倒な書き方になります。一応これでW3CのチェックでもValidになります。しかし、腑に落ちない。なぜスタイルのためだけに通常は必要のないhtmlを追加しなくてはいけないのか、それもIEのためだけに。<div>〜</div>に<br style="clear:both;" />を記述するのもちょっとためらうのに。

そう思っていたのですが、とても有用な方法を見つけました。いつも拝見させて頂いているの小粋空間さんの『CSS の after 擬似要素で回り込みを解除する』というエントリーです。

方法は至って簡単、cssを以下のように記述するだけです。

ul{
zoom: 100%;
}
ul:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

FirefoxやSafariなどのafter擬似要素に対応したブラウザはul:afterでfloatをクリアし、IE6、7対策として、ulに zoom: 100%;を指定します。zoomプロパティは、もともとIEの独自拡張で、指定要素を拡大表示するためのものですが、これを記述すると自動的にfloatがクリアされるようです。

この方法を使うとfloatのクリア忘れなどが減ってコーディング作業がとても効率化しました。唯一デメリットはzoomはIE独自のものなのでCSS valid にならなくなります。

« 元に戻す