blog@nero-8

・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ファイルによって追加する高さは異なります。
各ファイルで追加する高さは次のようになります。

FlowPlayer.swf	22px
FlowPlayerBlack.swf	16px
FlowPlayerThermo.swf	16px
FlowPlayerWhite.swf	26px

※上記設定はFlowPlayerVer1.21にて検証しました。
※ブラウザは、IE6、IE7、FireFox2.0.0.11、Opera9.24にて検証しました。
※FlashPlayerは9,0,111,0にて検証しました。

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

左：筑波最終コーナースピン　右：ご迷惑お掛けしました
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ファイルによって追加する高さは異なります。
各ファイルで追加する高さは次のようになります。

FlowPlayer.swf	22px
FlowPlayerBlack.swf	16px
FlowPlayerThermo.swf	16px
FlowPlayerWhite.swf	26px

※上記設定はFlowPlayerVer1.21にて検証しました。
※ブラウザは、IE6、IE7、FireFox2.0.0.11、Opera9.24にて検証しました。
※FlashPlayerは9,0,47,0にて検証しました。

ブログで公開する動画を、YoutubeのようにFlashのFLV形式で公開出来ないものかと探してみたら。。。FlowPlayerというWebページ埋め込みでFLV再生可能なツールがあったので、これに変更してみました。

FlowPlayerにつきまして《改訂版》をUpしました。設定テンプレートは、《改訂版》のものをお使い下さい。

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


既に公開している動画へ設置してみたらこんな感じに。
YouTubeの貼り付けみたい♪


●黒８番のベストラップ　※15fps→30fpsへ変更＆サイズを400x300へ変更
●AR-Cup 06/4th 黒８番車載ビデオ　※サイズを400x300へ変更

このFLV形式 & 再生するFLASH(FlowPlayer)にしておけば再生プレイヤー依存が無くなり、別ウィンドウで表示再生する必要もなくなるのでユーザフレンドリーなカタチになりました。また初期画面も好みのものを設置できるので遊べますヨ♪

さてさて、では作り方です。

◆動画をFLV形式に変換 Riva FLV Encoder

FLV形式への変換は、Riva FLV Encoder というツールを使用しました。
吐き出されるFLVファイルのサイズはビットレートによって大きく異なります。何故か画像サイズの大小では殆ど変化無しでした。ビットレートは任意に設定できるので、好みの画質とファイルサイズで作成可能です。
ダウンロードはこちらのページから。



作成したFLVファイルは6分26秒のもので、Video:550kbps/30fps、Audio:128kbps/44.1kの設定で約32MBでした。MPEG4 H.264の2倍とは言いませんが、それに近い大きさになりました。もう少し小さく出来ると申し分ないのですが。。。ネ。


◆FlowPlayerでの公開設定


FLV公開の縁の下の力持ち、FlowPlayerです。サイトはこちら、ダウンロードはこちらから。Flashが解っていれば難なく設置出来そうですが、、、スキル無し。ちょっと難儀しました。
ダウンロードしたアーカイヴにはサンプルのソースが記載されてますが、上手く設置できず。。。（汗　このため、サイトのソースを参考に作成しました。

<object type="application/x-shockwave-flash" data="movie/FlowPlayer.swf" width="400" height="322" id="FlowPlayerH">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="movie/FlowPlayer.swf" />
<param name="quality" value="high" />
<param name="scale" value="noScale" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="config={videoFile: 'movie/hogehoge.flv', splashImageFile: 'movie/hogehoge.jpg', autoPlay: false, hideControls: false, autoBuffering: false, loop: false, showLoopButton: false}" />
</object>

・data="movie/FlowPlayer.swf" パス（絶対or相対）記載
・height="322" コントロールバーの高さを加えた+22px（Ver.1.3は+24px）で記載
・<param name="movie" value ～ パスの記載を忘れずに♪
・videoFile: FLVファイルの場所 パス記載
・splashImageFile: スプラッシュ画像（初期表示画像）の場所をパス記載
※パスをURI記載にして、IEで動かずに難儀したのは内緒ですｗ
※Blogで使用する際は絶対パス指定が必要だと思います。
※下記の追記記載も参照ください。


===============================================

追記 07.02.17
Ver1.13 からの追加機能より、「Loopボタン非表示 = showLoopButton: false」 を追加しました。

訂正 07.02.20
コントロールバーの高さを訂正しました。

訂正 07.02.28
Ver.1.14にてコントロールバー高さを+22に修正しました。

追記 07.11.15
flowplayerのバージョンは頻繁に更新されています。上記設定はVer1.15当時のものになります。また、Ver1.18からはフルスクリーン表示の対応が計られていますが、上記設定では再生出来ませんでした。この現象を回避するには、フルスクリーンのボタンをOFFにする下記パラメータ追加が望ましいと思います。

【フルスクリーンボタン非表示】
パラメータ：showFullScreenButton: false,
追加場所：最下行[ param name="flashvars" ]内

また、Ver.1.21現在、Loopボタンのデフォルトは非表示となっています。設定詳細は、アーカイヴ内の flowplayer.js を参照ください。

表示不具合について 07.11.15
こちらのページのように１ページ内に複数設置をすると、Ver1.16以降のFlowplayerでは IE 6 にて表示不良が発生するようです（本サイトではVer.1.15を使用しています）。これは現在最新のVer.1.21でも同様の不具合となっています。
→ 不具合再現ページ
※ IE 7、FireFox 2.0.0.9、Opera 9.24 での確認では問題なく表示されました。
このため、ブログ内の同一カテゴリ表示など複数の動画設置が発生する場合は、Ver.1.15 が必要となります。Flowplayer Ver.1.15は、こちらの過去のバージョンリストから入手してください。

===============================================


FlowPlayer.swfを設置して、作ったFLVファイル、初期表示のjpegと、このソースをエントリに設置でFLVファイルの公開が出来ました。

しかし、一つ問題が見つかりました。多分ストリーミングサーバを使っていないので、、、なのですが、回線速度の速い環境だとファイルを一気に拾ってしまい再生処理が滞ることがあるようです。バッファ設定で回避とかできるのでしょうか。。。追々試してみたいと思います。