《改訂版》Youtubeのように動画をFLV形式で公開する (FlowPlayer) : blog@nero-8

December 01, 2007

●《改訂版》Youtubeのように動画をFLV形式で公開する (FlowPlayer)

左：スタート直後スピン　右：サイドアタック攻撃！

左：筑波最終コーナースピン　右：ご迷惑お掛けしました
FlowPlayerの"FlowPlayerWhite.swf"使用＆背景色を変更しています。
黒８番車NG集右下以外の３編は１レースでの出来事です（汗）group-a.org より転載です。。

FLV形式の動画ファイルをページ埋め込みで再生するツール、FlowPlayer。
色々と改訂が出てきたのでまとめて記載しました。

前回の記載以降、
・Ver.1.16以降、１ページに複数の動画設置で、IE6にて表示不良が発生します。
（ブログのカテゴリ表示など、個別の動画がまとめて表示される場合等にも不具合が発生します）
・最新版では各種設定オプションが増えました。
・機能追加によって非表示のほうが好ましい項目が増えました。

…このような各事項をクリアするために設定を刷新しました。
今回、objectタグ→embedタグへの変更でIE6での不具合も回避できました。
上の動画はVer1.21で動いています。

● FlowPlayerの入手

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

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

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

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

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

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

<object>
<embed
src="http://www.hoge.jp/movie/FlowPlayer.swf?config={
 embedded:true,
 baseURL:'http://www.hoge.jp/movie',
 splashImageFile:'/movie.jpg',
 videoFile:'/movie.flv',
 showFullScreenButton: false,
 autoBuffering: false,
 autoPlay: false,
 showLoopButton: false,
 loop: false,
 autoRewind: true,
 showMenu: true,
 menuItems: [true,true,true,true,false,false],
 initialScale: 'fit'
 }"
 width="400"
 height="322"
 scale="noscale"
 bgcolor="111111"
 type="application/x-shockwave-flash"
 allowScriptAccess="sameDomain"
 allowNetworking="internal">
</embed>
</object>

この設定のコピペで上手く表示できない場合は、改行が悪影響となる場合があるようです。<embed>～</embed> タグ内の全ての改行を削除すると正常に表示される事があるようです。
また参考までに下記２件では正常に表示できませんでした。
・3行目 src=" の改行位置を "FlowPlayer.swf?" 後にする
・width="400" の２行上、 initialScale: 'fit' にカンマ付加の改行。対策でカンマ不要の最下行に移動しました。

● オプションの説明

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

・ src="http://www.hoge.jp/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: false
全画面表示ボタン表示OFF。 trueで表示します。

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

・ autoPlay: false
自動再生をOFF。 trueで自動再生になります。
071213追記： splashImageFile を指定すると autoPlay は機能しない様子です。

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

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

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

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

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

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

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

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

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