REXEF(レクセフ) - ウェブデザイン&ウェブプログラム

ホームページ制作のREXEF(レクセフ)です

FLAVER 2.0 ご利用サイトから操作方法を調べに来られたお客様は、
こちらの操作パネル解説イラストをご覧ください

FLAVER2.0なら、複数の動画を1台のプレーヤーでスマートに公開できます！

FLVプレーヤー FLAVER は、FLVアルバム FLAVER 2.0 へと生まれ変わりました！

旧バージョンでの反省点やご要望から、まずは設置する際の判り易さや簡単さ、便利さなどを追求し、 さらには使う側から見た使い易さ、軽さ、快適さなども実現すべく、 捨てるべきものは潔く捨て、形だけの多機能は押しつけず、 みなさんに気軽に使っていただけるようなモデルを目指しました。

その結果、複数の動画をXMLファイル1点で設定可能とし、プレーヤーの貼付方法も単純な <object> タグのみとしました。 さらに、設定XMLファイル無しでも動画を1点貼付可能としました。

FLAVER2.0 簡易フロー

FLAVER 2.0 なら、複数の動画を1台のプレーヤーでスマートに公開できます♪

FLVアルバム FLAVER 2.0 free! new!

  1. 『 FLAVER 2.0 』 とは？
  2. 『 FLAVER 2.0 』 の設置例と操作方法
  3. 『 FLAVER 2.0 』 の機能一覧
  4. 『 FLAVER 2.0 』 の動作環境及び注意事項
  5. 『 FLAVER 2.0 』 ダウンロード
  6. 『 FLAVER 2.0 』 フローチャート
  7. 『 FLAVER 2.0 』 設置方法
    【アルバム機能】を利用する場合の設置方法
    1. サーバーに基本構成（専用フォルダとプレーヤー本体）を設置する
    2. 動画を準備して配置する （2つのアルバムに3動画ずつ配置する例）
    3. 設定XMLファイルを作成する
    4. ページへ FLVアルバム FLAVER 2.0 を貼る
    【シンプル機能】を利用する場合の設置方法
    1. サーバーに基本構成（専用フォルダとプレーヤー本体）を設置する
    2. 設定XML無しで単体FLV動画を貼る
  8. FLV形式の動画エンコードについて
  9. 謝辞

* FLV動画の作成方法については、便利なソフトをFLV形式の動画エンコードについてでご紹介しています。

『 FLAVER 2.0 』 とは？

FLVアルバム FLAVER 2.0 は、複数のFLVビデオ*1のストリーミング*2再生にも対応した、ウェブ用のFLVプレーヤーです。 バージョン2.0 では、1点の設定XMLファイルにより、初期設定や動画設定など全ての設定が行えるようになりました。 また、1点の設定XMLファイルを「1つのアルバム」として扱い、仮に複数のアルバムを作成した場合でも、 FLAVER 本体はあくまでも1基を共用利用し、複数のアルバムを表示・再生する事にも対応しました。 （アルバム毎にプレーヤータグの貼付は必要になりますが、プレーヤー本体自体は1基共用となります）

対応する FLASH Player のバージョンは、いろいろと検討した結果、最終的に FLASH 7 以上 を対応環境といたしました。 （理由は後述）

旧バージョンに引き続き、個人・商用利用問わず完全無料でご利用いただけます。 free!

*1 FLVビデオとは FLASH VIDEO フォーマットでエンコードされた動画ファイルの事で、FLASH内に取り込んで疑似ストリーミング再生させる仕組みに適した動画タイプです。 （専用のソフトを用いて簡単にFLV動画を作成することが出来ます）
*2 ストリーミングサーバーを使用しないため、厳密には疑似ストリーミングとなります

ご利用にあたり、事前・事後確認やリンク等の条件も一切ありません。
著作権はREXEF(レクセフ)に帰属します。再配布は基本的に禁止します。
（雑誌掲載やプラグイン等へのバンドルは事前にご相談ください）

TOP

『 FLAVER 2.0 』 の設置例と操作方法

【アルバム機能】による、FLAVER 2.0 + 設定XML での設置例

?xml=/webtool/flaver2/flaver.xml

【シンプル機能】による、FLAVER 2.0 のみの設置例

?video=/webtool/flaver2/movie/movie01.flv&time=00:21&title=%e3%83%91%e3%83%b3%e3%83%86%e3%82%aa%e3%83%b3%2f%e3%82%a4%e3%82%bf%e3%83%aa%e3%82%a2&color=#f9f0ff

FLASH用動画素材提供：ブルージラフ FLASH用動画素材提供：ブルージラフ様
この動画素材のご利用にあたっては事前にブルージラフ様の承諾が必要となりますので、このページから無断でお持ち帰りなさらぬようお願いいたします

* 上記例は、いずれも 340×320 で貼り付けた場合です
（FLAVER 2.0 では、最低貼り付けサイズが 340×320 ピクセルとなりました）

【アルバム機能】では、初期画面がアルバム表示（動画リスト表示）となります。 動画数が1画面を越えた場合は、各ページ送りボタン（« »）にてページを移動できます。

アルバム表示の各動画をクリックすると、該当の動画が再生されます。 また、再生画面にて アルバムボタン（≡）をクリックすると、いつでもアルバム表示へ戻ることが可能です。 （動画1点のみの場合や【シンプル機能】による貼付方法では、アルバムボタンは停止ボタン（■）に置き換わります） 更に、アルバム内では最後に閲覧した動画がマーキング表示されるので、迷子になりません。

フルスクリーンボタンは、アルバム表示・再生画面ともに利用可能で、再生画面でのフルスクリーン利用時には、直前の再生位置から再生が始まります（レジューム機能）

また、タイムスライダ・ボリュームスライダともに、旧バージョンでは各スライダのドラッグによる調整のみ対応していましたが、 FLAVER 2.0 ではタイムライン上の直接のクリックによる位置調整と、ボリュームバー上の直接のクリックによる音量調整にも対応しました。

インターフェイス

TOP

『 FLAVER 2.0 』 の機能一覧

機能

  • プレーヤーに関する機能

    1. アルバム表示機能 （複数動画設定時） new!
    2. サムネイル表示機能*1 （複数動画設定時） new!
    3. アルバム連続再生機能*2 （アルバム画面にオプション設定） new!
    4. タイムライン・クイックポイント*3 （再生位置指定） new!
    5. ボリューム・クイックポイント*4 （ボリューム位置指定） new!
    6. ワンクリック・フルスクリーン*5 （アルバム時・再生時 両対応） new!
    7. フルスクリーン・レジューム*6 （全画面で続き再生） new!
    8. FLASH 7 以上の幅広いブラウザ環境に対応
    9. プレーヤーファイルサイズ僅か17KBの軽量プレーヤー
    10. プレーヤーオンリサイズ （フルスクリーン時）
    11. アスペクト比保持 （貼付時・フルスクリーン時）
    12. タイムスライダ （再生中 or ポーズ中の再生位置移動）
    13. 倍速サーチ （再生中 or ポーズ中のForwordボタン押下時）

    ご利用者の皆様の声にお応えすべく、これまでに頂いたご要望を取り入れました。

    *1 サムネイルは別途画像の用意が必要です（省略時は固定アイコンが表示されます）
    *2 動画再生後の処理として、順に連続再生していく、何もせず停止する、アルバムへ戻る、のオプションが選択できます
    *3 タイムライン上の任意の位置のクリックによる再生位置の移動にも対応しました
    *4 *3同様、ボリュームバーのクリックによる音量調整にも対応しました
    *5 旧バージョンではポップアップ後に自由にリサイズしてもらいましたが、最初から全画面となるように変更しました
    *6 フルスクリーン利用時は、直前の再生位置から続きを再生するようにしました（待ちが長い場合は自由にポーズ・ストップ・プレビューしてください）

  • 設定に関する機能

    1. 【アルバム機能】 複数の動画をXMLファイル1点で管理*1 new!
    2. 【シンプル機能】 XML無しでも単体動画を直接プレーヤーへ指定*2 new!
    3. サムネイル設定可 new!
    4. アルバムタイトル設定可 new!
    5. 動画タイトル設定可
    6. スキンカラーを自由に設定可 [ #RRGGBB | 0xRRGGBB ]

    ご利用者の皆様の声にお応えすべく、これまでに頂いたご要望を取り入れました。
    また、ニーズの低い設定を極力減らし、設定XMLファイル作成の手間もスマートになりました。

    *1 旧バージョンでは初期設定用と動画設定用に2点のXMLが必要でしたが、それらを1点にまとめました。 （設定XMLは UTF-8 にて保存のこと） 更にXMLのファイル名も自由に変更可能になり、またアルバム毎にXMLパスを FLAVER へ渡す方式に変更しましたので、 全ての動画アルバムに対してFLAVER本体1基を共用出来るようになりました
    *2 動画1点のみであれば、設定XML無しでも直接プレーヤーへ設定クエリを渡すことで、 動画を貼る事が可能になりました（シンプル機能） 詳しくは、設定XML無しで単体FLV動画を貼る をご覧ください。

  • バージョン2.0での改善点

    1. 複数の動画設定を1点のXMLに集約した【アルバム機能】を追加
    2. XML無しでも1点の動画を直接プレーヤーへ貼付可能な【シンプル機能】を追加
    3. タイムスライダ上の任意のポイントクリックによる瞬時の再生位置移動に対応
    4. ボリューム上の任意のポイントクリックによる瞬時の音量位置移動に対応
    5. タイムスライダ移動調整・倍速サーチ時の精度改善
    6. 再生時・一時停止（ポーズ）時のCPU使用率の大幅な改善
    7. その他、設置ミス等の際のエラー処理を追加・最適化

  • バージョン2.0で廃止された旧機能

    1. コンパクトモード廃止*1
    2. JavaScript による動画切替廃止*2
    3. 別ウィンドウ起動ボタン設定廃止*3
    4. オートプレイ設定廃止*4
    5. 独自ロゴ機能廃止*5
    6. コンテキストメニュー（右クリックメニュー）廃止*6
    7. 画面クリックツール（プレイ/ポーズ）廃止*7
    8. 初期音量設定廃止*8

    *1 アルバムリスト表示スペースの問題から
    *2 アルバム形式により解決、また FLASH 9 での動作問題から（セキュリティの関係？）
    *3 全画面機能を標準機能とした為
    *4 アルバム表示を初期画面とした事により、ページ読み込みと同時に勝手に動画再生されてしまう問題が無くなった為。 但し、複数動画設定時にはオートプレイが働きますが、動画1点のみの場合には働きません
    *5 ニーズの低さから
    *6 ニーズの低さから
    *7 ニーズの低さから、及び一部不評により
    *8 初期ボリューム75％以降はクッキーによる記録のみとしました

  • バージョン2.0への搭載を見合わせた新機能案

    1. アルバム内検索機能*1
    2. アルバムページナビ機能*2
    3. FLV動画トータル時間の自動取得*3
    4. 動画再生中の前後スキップ（頭出し）機能*4
    5. SWFObject 系 JavaScript によるプレーヤーの貼付*5

    *1 設定XMLに登録する動画数があまりに多くなるような場合にニーズも出てくるかも？
    *2 現在は « (Prev) と » (Next) のページ送り機能のみ
    *3 これを実現する為には FLAVER 本体を FLASH 8 でコンパイルしなければならず、 かと言ってそれだけのために対応バージョンをひとつ上げてしまうのは現役の FLASH 7 利用者に対して申し訳ないと言う点と、 一方でメタデータに時間情報を含まない（あるいはメタデータが無い？）FLVファイルが存在するケースも否めない、と言う点から、今回は搭載を見合わせました。 その分、動画の設置者側に対しては、時間データを調べて設定XMLへ追加する作業が残りますが、より確実な動作実現のためにも何とぞご理解の程よろしくお願いいたします。 よって、FLAVER 2.0 は引き続き FLASH 7 以上を対応バージョンといたします
    *4 今回はオプションによる連続再生機能のみ
    *5 利用者層のこと、ソースの単純化のこと、もろもろ考慮した上で見送り（FLASH バージョン自体は FLAVER 内で判定処理しています）

    尚、これらの機能案はご要望が多ければ次期バージョンでの正式採用も検討いたします

TOP

『 FLAVER 2.0 』 の動作環境及び注意事項

  • 閲覧環境は、Windows・Mac共に、FLASH Player 7 以上がインストールされたブラウザをサポート*1
  • FLV動画は FLASH 7 までの一般的 H.263ベースコーデック（Sorenson Spark）によるエンコード済みFLVファイルのみをサポート*2
  • サムネイル画像は、非プログレッシブ形式のJPEG画像のみをサポート*3
  • 設定XMLは文字コード UTF-8 にて保存されたテキストファイルをサポート*4
  • 利用上、記述が発生する各パス（プレーヤー呼び出しパス・設定XMLパス・設定XML内のFLV動画パス及びサムネイル画像パス）は、絶対パス及びhttpによるURLを推奨*5
  • 【シンプル機能】により直接プレーヤーへ設定クエリーを渡す際、タイトル（title）に含む全角文字は10文字程度までとなります*6

*1 この対応条件を満たす為には、以下の*2及び*3の条件を満たす必要があります
*2 FLASH 8 以降に一般的になった On2 VP6 コーデックによりエンコードされたFLV動画は FLASH 7 では再生できません
*3 プログレッシブ形式のJPEG画像や、GIF画像（アニメ含む）、PNG画像には対応しません。 また、サムネイル用JPEG画像は 64×48 ピクセルで作成すると綺麗に表示されます （このサイズ以外で作成すると画像がギザギザになって見える場合があります）
*4 UTF-8 以外の文字コードで作成すると文字化けする場合がありますのでご注意ください
*5 相対パスにも対応していますが、記述ミスが発生しやすく推奨しません
*6 この場合のタイトルのURLエンコードはもちろん必要ですが、シンプル機能+フルスクリーン時の仕様上の問題から、 タイトルに含まれる全角文字が10文字前後を越えるとIEでのフルスクリーンが利かなくなります。（他のブラウザはOK） 原因は、FLASHのgetURLから渡されるJavaScriptのコード長が500文字を越えたあたりでIEは処理不能となるため（？）のようですが、 シンプル機能では各設定を古式ゆかしくクエリー形式でプレーヤーに渡しているため、 その際、UTF-8での全角文字のURLエンコードにより、どうしてもクエリーが極端に長くなってしまいます。 シンプル機能ではタイトルを短くするか、全角文字を減らして半角英数字を用いるか、いろいろと工夫をお願いします。 どうしてもタイトルの全角文字が多くなる場合は、設定XMLを作成しアルバム機能にてご利用ください。 アルバム機能を用いた場合でも動画設定が1点のみであれば、動作はシンプル機能と同様となります

テスト環境

上記IE問題を除き、以下の環境にて動作確認済み

  1. Windows XP SP2 - FLASH Player ver 9r115
    1. Internet Explorer 7.0
    2. Firefox 2.0.0.11
    3. Netscape 7.1
    4. Netscape 8.1.2
    5. Netscape 9.0b3
    6. Opera 9.21
    7. Safari 3.0.4
  2. Windows XP SP2 - FLASH Player ver 8r35
    1. Internet Explorer 6.0
    2. Firefox 2.0.0.11
    3. Netscape 7.1
    4. Netscape 9.0.0.4
    5. Opera 9.24
    6. Safari 3.0.4
  3. Mac OSX 10.2.8 - FLASH Player ver 7r70
    1. Internet Explorer 5.2.2
    2. Firefox 2.0.0.11
    3. Netscape 7.1
    4. Netscape 9.0.0.5
    5. Opera 9.24
    6. Safari 1.0.3
    7. iCab 3.0.3
    8. Camino 1.0.6
  4. Mac OS9 9.2.2 - FLASH Player ver 7r70
    1. Internet Explorer 5.0
    2. Netscape 7.02
    3. iCab 3.0.3

TOP

『 FLAVER 2.0 』 ダウンロード

flaver2.zip / 約20.0 KB ダウンロード

flaver2.zip の内容

flaver2                        - フォルダ
 ├ flaver.swf (約17KB)        - FLAVER本体
 ├ flaver.xml (約1KB)         - 設定XMLファイル(見本)
 ├ flaver.js (約3KB)          - FLAVER簡単貼付プログラム(オマケ)
 └ crossdomain.xml (約0.2KB)  - 別サーバー動画用XML(オマケ)

プレーヤーとしての必須ファイルは flaver.swf のみでOK。
アルバム機能を使用するにはアルバム毎に flaver.xml を複製・適宜編集後ご利用ください。
シンプル機能を使用する場合には flaver.xml は不要です。
FLAVER簡単貼付を使用しない場合は flaver.js は不要です。使い方はこちら
プレーヤーと別のサーバーに動画ファイルを配置する場合にのみ crossdomain.xml を別サーバーのルートに配置する必要がありますが、 プレーヤーと同一サーバー内に動画ファイルを展開する場合には crossdomain.xml は不要です。

使用説明書等は一切付属しておりませんので、このページを良くご覧の上、設置可能な方のみご利用ください。 この解説ページを FLAVER 2.0 の取扱説明書と代えさせていただきます。 ご利用に関しましては一切のサポートはございませんので予めご了承くださいませ。

TOP

『 FLAVER 2.0 』 フローチャート

フローチャート

【アルバム機能】 XMLによるアルバム生成の基本フロー

HTML ← <object>貼付 ← FLAVER ← クエリ(引数) ← 設定XMLパス

  1. Load(A) のような一般的なフローの仕組み

    まず、FLAVER （flaver.swf） は指定された設定XMLファイルへアクセスし、初期設定と動画設定を取り込み、 続いて動画リストを生成してアルバム表示をおこないます。 このとき、動画設定が1点しかない場合はそのまま再生画面へ移行します。
    アルバム表示から任意の動画をクリックすると再生画面へ移行、アルバムボタンをクリックするとアルバム表示へ戻ります。 ここまでが基本的な流れとなります。

  2. Load(B) のような別サーバーにある動画を再生する際のフローの仕組み

    基本的な流れは Load(A) と変わりませんが、唯一の違いは該当の別サーバーのルート（最上段の階層）に crossdomain.xml を設置しなければならない点です。これがないと FLAVER は別サーバーの動画を再生できません。 crossdomain.xml は FLAVER に同梱されているものを利用されてもOKですし、別途用意されても構いません。 詳しくは Adobeのサイトのセキュリティに関する問題 をご覧ください。

  3. ページへの FLAVER 貼付方法について

    一般的には (1) のように <object> タグを用いてプレーヤーをページへ貼り付けますが、 FLAVER 2.0 では、この <object> タグを簡単に貼る為のオマケ JavaScript (2) をご用意しました。 （詳細は後述）

【シンプル機能】 XMLを用いない動画1点のシンプルフロー

HTML ← <object>貼付 ← FLAVER ← 各設定クエリ(引数)

動画1点のみの場合は、Load(C) のように <object> タグにてプレーヤーを貼る際に、 FLV動画パス（必須）・動画時間（必須）・動画タイトル（省略可）・スキンカラー（省略可）をクエリー（引数）として プレーヤーパスへ渡すことで、設定XML無しでも単体動画を公開する事が可能です。 詳しくは、設定XML無しで単体FLV動画を貼る をご覧ください。

TOP

『 FLAVER 2.0 』 設置方法

設置方法は、大まかに以下のような流れとなります。 

【アルバム機能】を利用する場合
    1. FLAVER 2.0 をサーバーへ設置する
    2. FLV動画を準備してサーバーへ配置する
    3. 設定XMLを作成してサーバーへ配置する
    4. プレーヤーソースをページに貼付する

【シンプル機能】を利用する場合
    1. FLAVER 2.0 をサーバーへ設置する
    2. FLV動画を準備してサーバーへ配置する
    3. プレーヤーソースをページに貼付する

まず、ダウンロードした flaver2.zip を解凍し、生成されたファイルを確認しておきます。

FLAVER 2.0 は複数の動画アルバム全てに対して本体を共用できますので、 予めサーバーの判りやすい位置に本体を配置しておくことをお勧めします。

以降の例では、サーバーのルート（最上段の階層）に FLAVER 専用の dir flaver2 と言うフォルダを作成し、 その中に関連ファイルを収容するケース でご説明いたします。

* FLAVER 2.0 では全ての関連ファイルに自由なファイル名を与えられるようになりましたが、 その場合の各パスの記述の際はくれぐれも間違いの無いようにご注意ください
（無用のトラブルを回避するために、なるべくデフォルトのままのご利用を推奨します）

まずは、各パスの考え方と記述方法（予備知識）

今後、FLAVER本体を<object>タグで記述したり、設定XMLファイルへ動画パスやサムネイルパスを記述していく際に、 各パスの書き方を統一しておくと判りやすいでしょう。
各パスは、httpによるURLや、サーバー上の絶対パス・相対パスなどが利用できますが、 なるべく絶対パスかhttpによるURLでの記述方法を推奨いたします。 絶対パスやhttpによるURLであれば、どのページからでも同一パスで呼び出せますが、 相対パスの場合はページの階層が変わると全てのファイルパスが変化するため、ミスやトラブルの元となりお勧めできません。 

絶対パス：/flaver2/flaver.swf (推奨)
  ├ メリット  ：どのページからでも同一パスでOK
  └ デメリット：パソコン内チェックができない
                 (サーバークライアントがあれば可能)
http URL：http://YOURDOMAIN/flaver2/flaver.swf
  ├ メリット  ：どのページからでも同一パスでOK
  └ デメリット：記述パスが長くなる、関連ファイルの事前FTPが必須
                 (逆にパソコン内チェックが可能になる)
相対パス：flaver2/flaver.swf、../flaver2/flaver.swf など
  ├ メリット  ：パソコン内で容易にチェックが可能
  └ デメリット：ページの階層毎に相対関係を元にパスの割り出しが必要

但し、パスさえ間違いなくしっかり記述できるならば、例え関連ファイルを全てリネームしようとも、 例え関連ファイルや動画・サムネイル等を複雑な階層関係で配置しようとも、プレーヤー貼付の際の呼び出しパスや設定XMLファイルのパス、 あるいは設定XMLファイル内に記述するFLV動画パスやサムネイル画像パスに不備がなければ、FLAVER 2.0 は問題なく動作するでしょう。

以上を踏まえた上で、さあ、設置しましょう♪

TOP

【アルバム機能】を利用する場合の設置方法

  1. サーバーのルートに以下の基本構成を設置

    flaver2        - フォルダ
 ├ flaver.swf - FLAVER本体
 └ flaver.js  - FLAVER簡単貼付

    これにより、FLAVER本体のパスは、 

    絶対パス：/flaver2/flaver.swf
http URL：http://YOURDOMAIN/flaver2/flaver.swf

    となるはずです。（以降の解説では、http URL は省略します）

    * FLAVER簡単貼付を利用しない場合、flaver.js は不要です

  2. 動画を準備し、以下のように配置 （2つのアルバムに3動画ずつ配置する例）

    flaver2
 ├ flaver.swf
 ├ flaver.js
 │
 ├ album-A        - アルバムAフォルダ
 │  ├ flaver.xml - 設定XMLファイル * 作成方法は次項を参照
 │  ├ A-01.flv   - 動画FLVファイル 1
 │  ├ A-02.flv   - 動画FLVファイル 2
 │  ├ A-03.flv   - 動画FLVファイル 3
 │  ├ A-01.jpg   - サムネイル画像 1 (省略可)
 │  ├ A-02.jpg   - サムネイル画像 2 (省略可)
 │  └ A-03.jpg   - サムネイル画像 3 (省略可)
 │
 └ album-B        - アルバムBフォルダ
     ├ flaver.xml - 設定XMLファイル * 作成方法は次項を参照
     ├ B-01.flv   - 動画FLVファイル 1
     ├ B-02.flv   - 動画FLVファイル 2
     ├ B-03.flv   - 動画FLVファイル 3
     ├ B-01.jpg   - サムネイル画像 1 (省略可)
     ├ B-02.jpg   - サムネイル画像 2 (省略可)
     └ B-03.jpg   - サムネイル画像 3 (省略可)

    これにより、各設定XMLのパスは、 

    アルバムAの設定XMLパス：/flaver2/album-A/flaver.xml
アルバムBの設定XMLパス：/flaver2/album-B/flaver.xml

    となるはずです。

    * 各ファイル名は自由に変更できますが、上記のように統一性を持たせることで今後の管理が容易になるでしょう

  3. 設定XMLファイルを作成する

    まず、設定XMLファイル flaver.xml flaver.xml の基本フォーマットは以下のようになります。 

    <?xml version="1.0" encoding="utf-8"?>
<rexef id="FLAVER" version="2.0">

  <!-- 初期設定 (省略可) -->
  <init>
    <title></title> <!-- アルバムタイトル (省略可) -->
    <color></color> <!-- スキンカラー [#RRGGBB|0xRRGGBB] (省略時 #EAEAFB) -->
  </init>

  <!-- 動画設定 (いくつでも配置可/最低1セット必須) -->
  <data>
    <time></time> <!-- 動画時間 [00:00] (必須) -->
    <video></video> <!-- 動画FLVファイルパス (必須) -->
    <thumb></thumb> <!-- サムネイルパス (省略時固定アイコン) -->
    <title></title> <!-- 動画タイトル (省略可) -->
    <color></color> <!-- 動画別に設定可 (省略可) -->
  </data>

</rexef>

    * FLAVER 2.0 での設定XMLの基本構文は <rexef><init /><data /></rexef> となり、 初期設定を <init /> タグセット内にまとめ、動画設定を <data /> タグセット内にまとめます （ <rexef /> タグの各属性値 id、version は固定です）
    * 動画設定 <data /> は、いくつでも無制限に配置でき、記述した順がそのままアルバム表示順となりますが、 その点を除けば基本的に各要素の記述順に制限はありません
    * スキンカラー設定 <color /> は一般的なウェブカラー形式で、#RRGGBB 形式や 0xRRGGBB 形式が利用できます。仮に真っ青にするなら #0000FF あるいは 0x0000FF となります
    * 時間設定 <time /> は、MM:SS 形式となり、最大で59:59までが設定可能です。 仮に動画時間が90秒であれば 01:30 となります。 また、実際の動画時間に1秒未満の端数がある場合は切り上げずに切り捨てて設定してください。あるいは常に1～2秒程度短く設定することで、 タイムスライダの挙動や停止処理が確実となります
    * <thumb /> には、非プログレッシブのJPEG形式（.jpg） のみが設定可能で、 サイズは 64×48 ピクセル程度のものでOKです（実際には内部マスクにより60×45ピクセル程度となります） また省略時にはデフォルトの動画アイコンが表示されるようになっています

    上記のフォーマットに従い、アルバムA・アルバムB の各設定XMLは以下のようになります。

    アルバムA用の設定XMLの例
    <?xml version="1.0" encoding="utf-8"?>
<rexef id="FLAVER" version="2.0">

  <init>
    <title>動画アルバムA</title>
  </init>

  <data>
    <time>05:00</time>
    <video>/flaver2/album-A/A-01.flv</video>
    <thumb>/flaver2/album-A/A-01.jpg</thumb>
    <title>動画01</title>
  </data>

  <data>
    <time>05:00</time>
    <video>/flaver2/album-A/A-02.flv</video>
    <thumb>/flaver2/album-A/A-02.jpg</thumb>
    <title>動画02</title>
  </data>

  <data>
    <time>05:00</time>
    <video>/flaver2/album-A/A-03.flv</video>
    <thumb>/flaver2/album-A/A-03.jpg</thumb>
    <title>動画03</title>
  </data>

</rexef>

    * 上記の例では、各パスを絶対パスで記述し、他の要素は仮の値、または省略しています
    * 上記ソースを UTF-8 にて flaver.xml /flaver2/album-A/flaver.xml へ保存

    アルバムB用の設定XMLの例
    <?xml version="1.0" encoding="utf-8"?>
<rexef id="FLAVER" version="2.0">

  <init>
    <title>動画アルバムB</title>
  </init>

  <data>
    <time>05:00</time>
    <video>/flaver2/album-B/B-01.flv</video>
    <thumb>/flaver2/album-B/B-01.jpg</thumb>
    <title>動画01</title>
  </data>

  <data>
    <time>05:00</time>
    <video>/flaver2/album-B/B-02.flv</video>
    <thumb>/flaver2/album-B/B-02.jpg</thumb>
    <title>動画02</title>
  </data>

  <data>
    <time>05:00</time>
    <video>/flaver2/album-B/B-03.flv</video>
    <thumb>/flaver2/album-B/B-03.jpg</thumb>
    <title>動画03</title>
  </data>

</rexef>

    * 上記の例では、各パスを絶対パスで記述し、他の要素は仮の値、または省略しています
    * 上記ソースを UTF-8 にて flaver.xml /flaver2/album-B/flaver.xml へ保存

  4. ページへ FLVアルバム FLAVER 2.0 を貼る

    目的のページへプレーヤーソースを貼るには、従来通り <object>タグにより記述する方法と、 今回 FLAVER 2.0 用にオマケとして配布する「FLAVER簡単貼付 JavaScript」により記述する方法がご利用いただけます。

    従来通り <object>タグで アルバムA と アルバムB 用のプレーヤーを貼る
    <!-- アルバムA用のプレーヤーソース -->
<object data="/flaver2/flaver.swf?xml=/flaver2/album-A/flaver.xml"
 type="application/x-shockwave-flash" width="340" height="320">
<param name="movie" value="/flaver2/flaver.swf?xml=/flaver2/album-A/flaver.xml" />
<param name="wmode" value="transparent" />
</object>

<!-- アルバムB用のプレーヤーソース -->
<object data="/flaver2/flaver.swf?xml=/flaver2/album-B/flaver.xml"
 type="application/x-shockwave-flash" width="340" height="320">
<param name="movie" value="/flaver2/flaver.swf?xml=/flaver2/album-B/flaver.xml" />
<param name="wmode" value="transparent" />
</object>

    * プレーヤーパス は先述の通り、絶対パス（またはhttp URL）にて記述してください
    * ?xml= に続くクエリー（引数）により、アルバム設定XMLパスをプレーヤーへ受け渡します
    * プレーヤーサイズ は、最低でも340×320ピクセル以上で貼付してください （340×320での貼付時に動画表示部がちょうど QVGA 320×240 となります）

    FLAVER簡単貼付JavaScriptにて、アルバムA と アルバムB 用のプレーヤーを貼る

    まず、flaver.js /flaver2/flaver.js の設定を行います。メモ帳かテキストエディタで開き、以下の項目を必要に応じて編集してください。 

    var FlaverSWF = '/flaver2/flaver.swf';
// 'FlaverSWF'： FLAVER本体の絶対パス（デフォルトは/flaver2/flaver.swf）

var FlaverTag = 'span';
// 'FlaverTag'： 自動変換用に使用するタグ（デフォルトはspan）

var FlaverQuery = 'FlaverQuery';
// 'FlaverQuery'： 上記タグへ与える識別用クラス名（デフォルトはFlaverQuery）

var FlaverWidth = 340;
var FlaverHeight = 320;
// 'FlaverWidth'： 生成する FLAVER (<object>タグ) のサイズ

    * FlaverSWF パスは、絶対パスかhttp URLにて指定してください。

    次に、以下のようにページへソースを記述します。 

    <!-- 事前に該当ページのヘッダ内へ JavaScript を埋め込む -->
<head>
<script type="text/javascript" src="/flaver2/flaver.js"></script>
</head>

<!-- アルバムA用のプレーヤーソース -->
<span class="FlaverQuery">?xml=/flaver2/album-A/flaver.xml</span>

<!-- アルバムB用のプレーヤーソース -->
<span class="FlaverQuery">?xml=/flaver2/album-B/flaver.xml</span>

    * JavaScriptパス も、絶対パス（またはhttp URL）にて記述してください
    * アルバム設定XMLパスに ?xml= を付加したもの （基本的には <object> タグによる貼付の際のクエリーと同じもの） を、<span class="FlaverQuery"></span>タグへ入れて貼るだけで、 自動的にその位置へ該当アルバムのプレーヤーが生成されますので、例えばブログのテンプレートHTMLのヘッダへ事前にJavaScriptを埋め込んでおけば、 動画アルバムのプレーヤーをブログへ貼付する際に楽チンとなるでしょう
    * 尚、この FLAVER簡単貼付JavaScript では、貼付サイズは 340×320ピクセル固定となります。 必要に応じて、サイズも指定できるようにJavaScriptを書き換えていただいても結構です。
    * この JavaScript では、ページ読み込み完了後にページ内をサーチし、指定されたタグに指定されたクラス名があれば、 そのタグ内の文字列をプレーヤーへのクエリーとして取得し、更にそのタグ内にプレーヤーを生成する、と言う方法をとっています。 id を用いなかった理由は、SWFObject 系スクリプトを使用する際のように 貼付の際にいちいちユニークなIDを生成しなくて済むように、と言う配慮によるものです。 もっと良い方法があれば、自由に改良あるいは開発してみてください。 （今回は、「貼付のたびにJSをごちゃごちゃ書きたくない」、「ページ内に複数のプレーヤーをidフリーで実現」と言う目的にあわせて作成しました）

TOP

【シンプル機能】を利用する場合の設置方法

  1. サーバーのルートに以下の基本構成を設置

    flaver2        - フォルダ
 ├ flaver.swf - FLAVER本体
 └ flaver.js  - FLAVER簡単貼付

    これにより、FLAVER本体のパスは、 

    絶対パス：/flaver2/flaver.swf
http URL：http://YOURDOMAIN/flaver2/flaver.swf

    となるはずです。（以降の解説では、http URL は省略します）

    * FLAVER簡単貼付を利用しない場合、flaver.js は不要です

  2. 設定XML無しで単体FLV動画を貼る

    もっとも簡単にFLV動画を公開する方法として、単に1つのFLV動画をページへ貼付したいだけであれば、 該当のFLV動画と FLAVER 2.0 さえあれば、設定XML無しでも貼付する事ができます。 その場合は、ページへのプレーヤー貼付ソースを <object> タグで貼る際に、 すべての設定（FLV動画パス、動画時間、タイトル、スキンカラー）をプレーヤーパスへのクエリー（引数）として渡してください。 （但し、設定可能な動画数は1点のみです）

    クエリー（引数）は、以下の項目を &amp; で連結したものを、 更に ? を使ってプレーヤーパスへ連結します。 （各値は設定XMLのルールに準じます） 

    video=FLV動画ファイルパス (必須)
time=動画時間 (必須)
title=動画タイトル (省略可)
color=スキンカラー (省略可)

    実際にこれらの引数をクエリーとしてプレーヤーパスへ連結した場合、プレーヤーソースは以下のようになります。 （title と color は省略し、各値も***で表しています） 

    <!-- <object> タグによる設定XML無しのソース -->
<object data="/flaver2/flaver.swf?video=***&amp;time=***"
 type="application/x-shockwave-flash" width="340" height="320">
<param name="movie" value="/flaver2/flaver.swf?video=***&amp;time=***" />
<param name="wmode" value="transparent" />
</object>

<!-- FLAVER簡単貼付JavaScript使用時の同ソース -->
<span class="FlaverQuery">?video=***&amp;time=***</span>

    * 先述の通り、各パスは絶対パス及びhttp URLでの記述を推奨します
    * 動画タイトルは UTF-8 でURLエンコードしたものを渡してください。 貼付対象のページがUTF-8なら非エンコードでもおよそ大丈夫かと思いますが、 基本的にURL内へ全角文字をそのまま記述すると文字化けする場合があり、またHTMLの記述ルールとしても URL中の全角文字はURLエンコードしておくという決まりがあります
    例） 「動画」と言う文字をUTF-8にてURLエンコードすると、「%E5%8B%95%E7%94%BB」となります （URLエンコード方法については割愛します）
    その他、『 FLAVER 2.0 』 の動作環境及び注意事項の項にも記しましたが、 シンプル機能でのタイトル（title）の指定の際には、全角文字は10文字前後以上含まないようにご注意ください （IEでのフルスクリーンが利かなくなります）
    * 連結子 &amp;（アンパーサンド） は & と書いてもおよそ動作すると思いますが、 HTML のルールではソース中の& は &amp; と書く決まりがあります
    * シンプル機能での動作は、アルバム機能での動画1点のみ設定時の動作と、基本的に同じとなります
    * FLAVER簡単貼付JavaScript の事前設定方法については こちら をご覧ください

    この方法なら、サーバーに FLAVER 2.0 のみ設置されていれば、あとは毎回FLV動画のみをアップロードして、 プレーヤーソースとして <object> タグを貼るだけの簡単構成となります。 XMLファイルの別途作成も不要ですし、JavaScript 等も一切書く必要はありません。 主にFLV動画を1点ずつ公開される方にオススメな利用方法です♪

TOP

FLV形式の動画エンコードについて

FLV（FLASH VIDEO）フォーマットの動画エンコードには「Riva FLV Encoder 2.0」と言うソフトがオススメです。 「Riva FLV Player 1.2」と言うFLVプレーヤーもありますので、ローカルでの再生にも便利です。

Riva VX - Riva FLV Encoder 2.0 配布元（英語）

* トップ > Downloads のページからダウンロードできます
* インストーラーにはFLVプレーヤーも含まれています（追加オプション）
* エンコード中は一件フリーズしたように感じますが、終了すれば元画面へ復帰します
* 上記のリンク先とレクセフは一切関係はございません

TOP

謝辞

このページで使用した各サンプル用動画の準備にあたり、下記のサイトの動画素材を利用させて頂きました。ここにお礼申し上げます。

FLASH用動画素材提供：ブルージラフ FLASH用動画素材提供：ブルージラフ様

TOP

以上、まとまりが悪く無駄に長くなってしまい申し訳ありませんが、これをもって FLVアルバム FLAVER 2.0 の利用案内とさせていただきます。 どうか皆様の動画ライフにお役立ていただけましたら幸いです。

2008/01/20

その他、ご意見ご感想、各種お問い合わせはメールにて承ります。
info@rexef.com

REXEF(レクセフ) REXEF(レクセフ)

RSS 1.0 Atom 1.0

Valid XHTML 1.0 Strict Valid CSS!