blog@nero-8: December 13, 2007 Archive

RSS Link

Links

FavoriteTUBE

December 13, 2007

●FlowPlayerで全画面表示 (サンプル動画：MilleMiglia）

Top ＞ Movabletype ＞ FlowPlayer

・1999年MilleMigliaのフータ峠での映像です。
・クリックすると別ウィンドウが開いて再生が始まります。
・手持ち流し撮りの見苦しい動画でスミマセン。

FlowPlayerの全画面設定を行ってみました…が、相応の画面サイズと高ビットレートが必要と思われます。H.264フォーマットの普及待ちでしょうか。サンプル動画は FLV 384x288 550kbpsで作成しています。

全画面表示には、 SWFObject というツールを使っているようです。必要なファイルは既にFlowPlayerのアーカイヴへ同梱してありました。

また、全画面表示では右下にFlowPlayerのロゴが表示されます。これを消すには$50(!)を支払う必要があります（汗）

設定は、FlowPlayer標準の方法ではなく SWFObject の書式に則ったものになっています。IE6での複数動画表示時の不具合が発生しますので、今回のように別ウィンドウ設置が望ましいと思います。

● FlowPlayerの入手

下記サイトからFlowPlayerを入手します。
http://sourceforge.net/project/showfiles.php?group_id=133868

● ディレクトリ（フォルダ）とファイルの関係

下記のようなディレクトリとファイル配置の前提で説明します。

www.hoge.jp┐
　　　　　　├ /movie
　　　　　　│　　│
　　　　　　　　　├ FlowPlayer.swf
　　　　　　　　　├ movie.jpg (初期表示画像)
　　　　　　　　　├ movie.flv (動画ファイル)
　　　　　　　　　├ swfobject.js (同梱ファイル)

● 設定ファイルテンプレート

１．下記テンプレートの青文字部分を対象のサイトドメインとディレクトリ及びファイル名に変更します。
２．赤文字部分で動画表示の画面サイズを設定します。ただし、高さ(height)は「表示サイズ＋22」の値を設定して下さい。

<script type="text/javascript" src="/movie/swfobject.js"></script><div id="fp1" class="flowplayer">Basic demo</div>
<script type="text/javascript">
// <![CDATA[
var fo = new SWFObject("/movie/FlowPlayer.swf", "FlowPlayer", "420", "337", "9", "#ffffff", true);
fo.addParam("AllowScriptAccess", "always");
fo.addParam("allowFullScreen", "true");
fo.addVariable("config", "{ baseURL:'http://www.hoge.jp/movie', splashImageFile:'/movie.jpg', videoFile:'/movie.flv', showFullScreenButton: true, autoBuffering: false, autoPlay: false, showLoopButton: false, loop: false, autoRewind: true, showMenu: true, menuItems: [true,true,true,true,true,false], useNativeFullScreen: true, initialScale: 'fit' }");
fo.write("fp1");
// ]]>
</script>

設定表記途中で改行が入ると正常表示が出来ませんでした。
正常設定されてない場合は、"Basic demo" と表示されます。

● オプションの説明

各オプションの説明です。

・ src="/movie/swfobject.js"
全画面表示用スクリプトファイルの場所を Path で記載します。
URI 指定でも問題無く動作するようです。

・ var fo = new SWFObject("/movie/FlowPlayer.swf"
FlowPlayer.swf の場所を URI 又は Path で記載します。

・ baseURL:'http://www.hoge.jp/movie'
FLVファイルと初期表示のJPGファイルの場所を URI で記載します。

・ splashImageFile:'/movie.jpg'
初期表示のJPGファイルの場所を baseURL を基準に Path で記載します。
URI 指定でも問題無く動作するようです。（初期画像は無くても問題ありません）

・ videoFile:'/movie.flv'
FLVファイルの場所を baseURL を基準に Path で記載します。
URI 指定でも問題無く動作するようです。

・ showFullScreenButton: true
全画面表示ボタン表示ON。 falseで非表示にします。
メニューボタンからも全画面に移行できます。

・ autoBuffering: false
ページ表示時点のFLVファイル読込みをOFF。
true の場合、ページ表示と同時にFLVデータを読込みます。
再生は次項目の autoPlay で制御します。

・ autoPlay: false
自動再生をOFF。 trueで自動再生になります。
サンプル動画では自動再生 ON にしてあります。
splashImageFile を指定すると autoPlay は機能しない様子です。

・ showLoopButton: false
ループon/offボタンの表示OFF。 trueで表示します。

・ loop: false
ループ再生をOFF。 trueでループ再生します。

・ autoRewind: true
再生終了後、初期状態に戻ります。 falseは再生終了状態のまま停止します。

・ showMenu: true
表示サイズやEMBED...を選択するメニューボタンを表示します。
falseでメニューボタン非表示になります。

・ menuItems: [true,true,true,true,true,false]
メニューボタン内項目の表示／非表示を設定します。
左より、
Fit to window
Half size
Original size
Full window
Full screen
embed...
・・・の順番で true=表示、false=非表示となります。
テンプレートでは embed... を非表示としています。
embed... は、他サイトへの転載可能な URI を表示します。

・ useNativeFullScreen: true
Flash 9 ネイティブ全画面モードをON

・ initialScale: 'fit'
設定した画面サイズと動画サイズの関係を指定します。
fit : 設定画面サイズの最大でアスペクト比を維持して表示します。
half : 設定画面サイズの1/2でアスペクト比を維持して表示します。
scale : アスペクト比に関係なく設定画面サイズで表示します。
orig : 動画本来のオリジナルサイズで表示します。（設定画面サイズのほうが小さい場合はアスペクト比維持で設定画面サイズに縮小します）

・ width="420"
画面サイズの横幅を設定します。

・ height="337"
画面サイズの高さを設定します。ただしコントロールバーの高さ+22を含めたサイズで設定が必要です。

同梱される各swfファイルによって追加する高さは異なります。
各ファイルで追加する高さは次のようになります。