FlowPlayer Category : blog@nero-8

April 17, 2009

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

以前から使用している動画埋め込み用Flashの Flowplayer が、いつの間にかバージョンも.3.10まで上がり設置方法も一新されていたので、改めて設定例を作ってみました。

2009.05.20：

FlowPlayer 3.1.1 にて動作確認を行い、表記バージョンを修正しました。

2009.07.30：

FlowPlayer 3.1.2 にて動作確認を行い、表記バージョンを修正しました。

2009.09.04：

FlowPlayer 3.1.3 にて動作確認を行い、表記バージョンを修正しました。
このバージョンより、動画ファイル指定に対して、絶対パスまたはflowplayer-3.x.x.swfからの相対パス指定が必要となりました。

2009.10.08：

FlowPlayer 3.1.4 にて動作確認を行い、表記バージョンを修正しました。

2009.10.25：

FlowPlayer 3.1.5 が公開されましたが、自環境にてIE6/IE7が再生不良となりました。本家サイトでは最新版 ver3.1.5 のみDL可のため、正常動作確認まで ver.3.1.4 を置いておきます。
flowplayer-3.1.4.zip

動画は1999年 AlfaRomeoFesta@PortelloGiappone、富士スピードウェイ旧コース。12気筒アルファF1や33SC12が通り過ぎていく1周です。運転はへナチョコですのであしからず。。。

さて本題のFlowplayer 3 です。

【以前のバージョンと比べて…】

使用感では、次のような改善がされている感じです。
・ウェブサーバ側でURLのディレクトリがエイリアス設定などされてる場合の動作不良が改善された。
・フルスクリーン表示時の制御や動作が安定した。
・以前問題だった、ページ内複数動画も問題なし。
・様々な多機能・高機能化

また、「？」と思われる点もちらほら。
・初期画像表示がネイティブ実装から外れて、html依存になった。
・設定諸々、過去のソースが流用出来ない。

そして、相変わらずのコンセプトも。。。
・多機能、高機能を狙っているため標準設定ではアスペクト比維持がされない。
・本家サイトを見ても判りにくいｗ

とっても多機能・高機能なFlowplayer 3 ですが、実現したいのはBlogへの埋め込みと、アスペクト維持でのフルスクリーン表示程度。なので、このあたりの機能にのみフォーカスしたシンプルな設定としています。

【Flowplayer 3 の具体的な設定例】

とにかく設定ソースが欲しい！という方はリンクを開いちゃって下さい。

・基本設定　<div>タグ使用
Flowplayer 3.1.4 <div>タグ設置例【ベーシック設定】

・詳細設定　<div>タグ使用
Flowplayer 3.1.4 <div>タグ設置例【詳細設定】

・基本設定　<a>タグ使用
Flowplayer 3.1.4 <a>タグ設置例【ベーシック設定】

以下、Flowplayer 3 設置に関する格子です。

【Flowplayer 3 で再生可能な動画形式】

・ FLV4
・ H.264 mp4コンテナ
※YouTube fmt=35のFLV5は再生できませんでした。

【Flowplayer 3 のダウンロード】

こちらから Open Source license 版を入手します。
http://flowplayer.org/download/index.html

【使用するファイルは？】

次の3ファイルを使用します。
・flowplayer-3.1.4.swf
・flowplayer.controls-3.1.4.swf
・flowplayer-3.1.4.min.js （exampleフォルダ内）

以下、次のようなディレクトリ構成として進めます。

www.hoge.jp┐
　　　　　　├ /flowplayer
　　　　　　│　　│
　　　　　　│　　├ flowplayer-3.1.4.swf
　　　　　　│　　├ flowplayer.controls-3.1.4.swf
　　　　　　│　　├ flowplayer-3.1.4.min.js
　　　　　　│
　　　　　　├ /movie
　　　　　　│　　│
　　　　　　　　　├ hoge.html (動画ページ)
　　　　　　　　　├ splash.jpg (初期表示画像)
　　　　　　　　　├ hoge.mp4 (動画ファイル)

【Flowplayer 3 設定の基本書式】

Flowplayer 3 の書式構成は下記のようになります。
・<head>～</head>内にflowplayer-3.1.4.min.js を記載。
　（Blog投稿などで入れられない場合は、投稿作成欄に記載でOK）
・<div>タグまたは<a>タグで動画表示エリアを確保。
・<script>～</script>にFlowplayer設定を記載。
・動画表示エリア（<div>または<a>）と、設定（<script>）は、idで紐付け。

　<head>
　　　/flowplayer/flowplayer-3.1.4.min.js
　</head>

　<div id=hoge ></div>　　　←動画表示エリア設定

　<script>　　　　　　　　　←Flowplayer3の設定
　　　id=hoge
　　　/flowplayer/flowplayer-3.1.4.swf
　　　　・
　　　　・
　　　　・
　</script>

【Flowplayer 3 設定 <script>～</script>内の基本書式】

　<script>
　flowplayer(
　　　　紐付けid
　　　　flowplayer-3.1.4.swfのURI

　　clip:
　　　　動画ファイルに関する設定

　　playlist:
　　　　プレイリストによる再生の設定（今回は使いません）

　　canvas:
　　　　背景色などに関する背景の設定

　　plugins:
　　　　コントロールバーに関する設定など
　　　　他様々なPluginの設定
　);
　</script>

※ Ver.3.1.3より、設定内の動画ファイル指定に対して、絶対パスまたはflowplayer-3.x.x.swfからの相対パス指定が必要となりました。

具体的な設置例・設定パラメータは、下記ページを参照下さい。

【Flowplayer 3 設定テンプレート】

・基本設定　<div>タグ使用
Flowplayer 3.1.4 <div>タグ設置例【ベーシック設定】

・詳細設定　<div>タグ使用
Flowplayer 3.1.4 <div>タグ設置例【詳細設定】

・基本設定　<a>タグ使用
Flowplayer 3.1.4 <a>タグ設置例【ベーシック設定】

この他にも様々な機能が実装されているFlowplayer 3 ですので、興味のある方は本家サイトをじっくりと眺めて見て下さい。

2009/04/17 22:10 | Comments [5] | Trackbacks [3]

December 13, 2007

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

FlowPlayer設定につきまして「Flowplayer 3 対応版」を公開しました。
設定テンプレートは、「Flowplayer 3 対応版」のものをお使い下さい。

→ Blog内に動画埋め込み Flowplayer3の設定

・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にて検証しました。

2007/12/13 00:00 | Comments [8] | Trackbacks [0]

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 (動画ファイル)

<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にて検証しました。

2007/12/01 02:30 | Comments [9] | Trackbacks [2]

January 11, 2007

Youtubeのように動画をFLV形式で公開する (FlowPlayer)

FlowPlayer設定につきまして「Flowplayer 3 対応版」を公開しました。
設定テンプレートは、「Flowplayer 3 対応版」のものをお使い下さい。

→ Blog内に動画埋め込み Flowplayer3の設定

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

既に公開している動画へ設置してみたらこんな感じに。
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ファイルの公開が出来ました。

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

2007/01/11 23:25 | Comments [11] | Trackbacks [1]

Site Total :

Weblog Total :
Today :
Yesterday :