blog@nero-8

◆動画を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ファイルの公開が出来ました。

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