FLVプレーヤー FLAVER｜ウェブツール

↑最新版 FLVアルバム FLAVER 2.0 はこちらをクリック！

旧バージョン FLVプレーヤー FLAVER 1.0 は、2008/02いっぱいをもって配布を終了しました。
最新バージョン FLVアルバム FLAVER 2.0 をご利用ください。

『 FLAVER 』とは？

読み方: えふえるぶいぷれーやーフレーバー
意味: 「flavor/フレーバー（風味）」からもじってみました。

FLVプレーヤー FLAVER

『 FLVプレーヤー FLAVER 』は、ページ上でFLV形式*1の動画をストリーミング再生*2させるためのFLASH製プレーヤーです。最近では FLASH Player は多くの環境で実装されていますから、プラットフォームやブラウザ*3を意識することなく、お手軽に動画配信を実現することが可能になります。

また、豊富なオプション機能により、スキンカラーや音量等もプレーヤー毎に自由に設定が可能です。

FLVプレーヤー FLAVERは、完全無料のフリーウェアです。

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

TOP

『 FLAVER 』の機能一覧

プレーヤーに関する機能
1. ファイルサイズ約10KBの軽量プレーヤー
2. 標準/コンパクトモード （表示サイズ340×320以上で標準ツールパネル自動表示）
3. プレーヤーオンリサイズ （別ウィンドウ時）
4. アスペクト比保持 （貼付時・別ウィンドウ時）
5. タイムスライダ （再生中 or ポーズ中の再生位置移動）
6. 倍速サーチ （再生中 or ポーズ中のForwordボタン押下時）
7. JavaScript による動画切替対応 （SetVariable() 関数にてリアルタイムに変更可能）
設定に関する機能
1. XMLファイルによる設定形式 * UTF-8にて保存のこと
2. 動画タイトル設定可
3. 別ウィンドウ起動ボタンの有無設定可 [ true | false ]
4. オートプレイの可否設定可 [ true | false ]
5. スキンカラーを自由に設定可 [ #RRGGBB | 0xRRGGBB ]
6. 初期音量設定可 [ 0~100 ] （省略時クッキー有効）
7. 独自ロゴ等の表示設定可 （標準モード時にディスプレイ部右下に表示）

TOP

『 FLAVER 』フローチャート

フローチャート

まず FLAVER （flaver.swf）は Load(1) で示す初期設定XMLファイル（flaver.xml）を読み込みます。ここで指定された各要素がデフォルトの設定となります。（フルボタン・自動再生・スキンカラー・音量等）
この時、初期設定内に動画設定があれば再生状態になります。
ここまでが基本構成です。
続いて、FLAVER に対し id 指定によるタグの埋め込み、あるいは JavaScript からの id 切り替えイベントが発生した際には、初期設定を継承しつつ、Load(2) で示す動画設定XMLファイル（movie*.xml）を読み込みます。この時の id とは、動画設定XMLファイルのファイル名（拡張子除く）となります。また、動画設定XMLファイルで指定された共通要素は、初期設定XMLファイルで指定されている共通要素よりも優先されます。
（これにより、フルボタン・自動再生・スキンカラー・音量等の機能がムービーごとに変更できます）
2に続いて、動画設定に従い Load(3) で示すFLV動画ファイル（moviw*.flv）を読み込み、再生します
以後、JavaScript による id の切り替えイベントが発生した際には 2 以降を繰り返します。

TOP

『 FLAVER 』設置方法

1つの動画のみを貼り付ける最小構成のケース
```
[ flaver ] - 各ファイルを格納するためのフォルダ
   ├ my_movie.html - 動画ファイルを埋め込みたいページ
   ├ flaver.swf    - プレーヤー
   ├ movie.flv     - FLV動画ファイル
   └ flaver.xml    - 初期設定XMLファイル
     * movie.xml は不要
```
1. 各ファイルを格納するためのフォルダを作成し、フォルダ名を「flaver」としてください。
2. ムービーを埋め込むためのページをflaverフォルダ内に作成します（仮に「my_movie.html」とします）。
3. flaverフォルダへプレーヤー「flaver.swf」を格納します。
4. FLV動画ファイルを準備し、ファイル名を「movie.flv」として、flaverフォルダへ格納します。
  （FLV動画の作成に便利なソフトをこのページの一番下で紹介しています）
5. 動画のトータル時間を確認してください（仮に90秒なら「01:30」とします）。
6. この動画のタイトルを決めてください（仮に「マイムービー」とします）。
7. 次に初期設定XMLファイルを以下のように作成し、ファイル名を「flaver.xml」として、flaverフォルダへ格納してください（UTF-8エンコードにて保存のこと）。
```
<?xml version="1.0" encoding="utf-8"?>
<rexef id="FLAVER" version="1.0" type="init">
  <path>./</path> 
  <file>movie.flv</file>
  <time>01:30</time>
  <title>マイムービー</title>
</rexef>
```
  * 例として、ページをflaverフォルダの外に配置する際は <path>flaver/</path> となります
8. 最後に「my_movie.html」のページへムービー用のタグを記述します。
```
<object data="flaver.swf"
 type="application/x-shockwave-flash" width="340" height="320">
<param name="movie" value="flaver.swf" />
<param name="wmode" value="transparent" />
</object>
```
  * 貼り付けサイズ340×320以上では自動的に標準ツールパネルが表示されます
  * 例として、ページをflaverフォルダの外に配置する際は ="flaver/flaver.swf" となります
  * <param name="wmode" value="transparent" /> は角丸の透過用です
複数のムービーを用意しIDで呼び出して貼り付けるケース（以下は3つの例）
```
[ flaver ] - 各ファイルを格納するためのフォルダ
   ├ my_movie.html - 動画ファイルを埋め込みたいページ
   ├ flaver.swf    - プレーヤー
   ├ flaver.xml    - 初期設定XMLファイル
   └ [ movie ]     - FLV動画格納フォルダ
          ├ movie.flv    - FLV動画ファイル
          ├ movie.xml    - 動画設定XMLファイル
          ├ movie2.flv   - FLV動画ファイル(2)
          ├ movie2.xml   - 動画設定XMLファイル(2)
          ├ movie3.flv   - FLV動画ファイル(3)
          └ movie3.xml   - 動画設定XMLファイル(3)
            * movie.xml を必要数複製してご利用ください
```
1. 各ファイルを格納するためのフォルダを作成し、フォルダ名を「flaver」としてください。
2. ムービーを埋め込むためのページをflaverフォルダ内に作成します（仮に「my_movie.html」とします）。
3. flaverフォルダへプレーヤー「flaver.swf」を格納します。
4. 次に初期設定XMLファイルを以下のように作成し、ファイル名を「flaver.xml」として、 flaverフォルダへ格納してください（UTF-8エンコードにて保存のこと）。
```
<?xml version="1.0" encoding="utf-8"?>
<rexef id="FLAVER" version="1.0" type="init">
  <path>movie/</path> 
</rexef>
```
  * このケースでは初期設定XMLファイル内に<file>、<time>、<title> の設定は不要です
5. 各FLV動画ファイルを準備し、ファイル名を「movie[2-3]*.flv」として、flaver/movieフォルダへ格納します。（FLV動画の作成に便利なソフトをこのページの一番下で紹介しています）
6. 各動画のトータル時間を確認してください（仮に90秒なら「01:30」とします）。
7. 各動画のタイトルを決めてください（仮に「マイムービー[2-3]*」とします）。
8. 次に各動画設定XMLファイルを以下のように作成し、ファイル名を「movie[2-3]*.xml」として、 flaver/movieフォルダへ格納してください（UTF-8エンコードにて保存のこと）。
  （動画設定XMLファイルはFLV動画ファイル毎に必要です）
  
  例） movie.flv のための movie.xml の設定記述例
```
<?xml version="1.0" encoding="utf-8"?>
<rexef id="FLAVER" version="1.0" type="file">
  <file>movie.flv</file>
  <time>01:30</time>
  <title>マイムービー</title>
</rexef>
```
  例） movie2.flv のための movie2.xml の設定記述例
```
<?xml version="1.0" encoding="utf-8"?>
<rexef id="FLAVER" version="1.0" type="file">
  <file>movie2.flv</file>
  <time>01:30</time>
  <title>マイムービー2</title>
</rexef>
```
  例） movie3.flv のための movie3.xml の設定記述例
```
<?xml version="1.0" encoding="utf-8"?>
<rexef id="FLAVER" version="1.0" type="file">
  <file>movie3.flv</file>
  <time>01:30</time>
  <title>マイムービー3</title>
</rexef>
```
  * 各FLVファイルと各動画設定XMLファイル名は同一である必要はありませんが、ここでは判りやすくするために同一にしています。実際はXMLに記述するFLVのファイル名がFLV動画のファイル名と一致していればOKです
  （例として、abc.flv と言う動画を 123.xml と言う動画設定XMLファイルへ記述するには、<file>abc.flv</file> と記述します）
9. 最後に「my_movie.html」のページへ各ムービー用のタグを記述します。
  
  例） movie.flv のためのタグ記述例
```
<object data="flaver.swf?id=movie"
 type="application/x-shockwave-flash" width="340" height="320">
<param name="movie" value="flaver.swf?id=movie" />
<param name="wmode" value="transparent" />
</object>
```
  例） movie2.flv のためのタグ記述例
```
<object data="flaver.swf?id=movie2"
 type="application/x-shockwave-flash" width="340" height="320">
<param name="movie" value="flaver.swf?id=movie2" />
<param name="wmode" value="transparent" />
</object>
```
  例） movie3.flv のためのタグ記述例
```
<object data="flaver.swf?id=movie3"
 type="application/x-shockwave-flash" width="340" height="320">
<param name="movie" value="flaver.swf?id=movie3" />
<param name="wmode" value="transparent" />
</object>
```
  * id は各動画設定XMLのファイル名（拡張子不要）です。（FLVのファイル名ではありません）
  （例として、<file>abc.flv</file> と記述した 123.xml と言う動画設定XMLファイルを呼び出すには、id=123 とします）
  * 貼り付けサイズ340×320以上では自動的に標準ツールパネルが表示されます
  * <param name="wmode" value="transparent" /> は角丸の透過用です
JavaScript からの動画切り替え方法

FLAVER は JavaScript の SetVariable() 関数を用いた動的な動画切り替えにも対応しています。
Mac+IE・旧Safari 等、一部のブラウザでは SetVariable() は動作しませんので、OBJECT タグごとの書き換え等、JavaScript に工夫が必要です

上記の「複数のムービーを用意しIDで呼び出して貼り付けるケース」のように、既に複数の動画と各設定ファイルが準備されている前提で、以下の例を参考にしてみてください。

例） JavaScript の記述例
```
function setFlaver(id){
  (document.all)?
    window.FLAVER.SetVariable('id',id) :   // for IE
    document.FLAVER.SetVariable('id',id);  // for Gecko
}
```
* 太字の FLAVER は下記の OBJECT タグに付加したID名です

例）プレイヤーの記述例（1つのみ設置）
```
<object id="FLAVER" data="flaver.swf"
 type="application/x-shockwave-flash" width="340" height="320">
<param name="movie" value="flaver.swf" />
<param name="wmode" value="transparent" />
</object>
```
* OBJECT タグに id="FLAVER" を必ず付加してください（ JavaScript 内の太字のID名と同じもの）
* <param name="wmode" value="transparent" /> は角丸の透過用です

例）動画切り替えボタンの記述例
```
<a href="#FLAVER" onclick="setFlaver('movie');">動画(1)</a>
<a href="#FLAVER" onclick="setFlaver('movie2');">動画(2)</a>
<a href="#FLAVER" onclick="setFlaver('movie3');">動画(3)</a>
```
* 切り替えボタンの関数呼び出しには各動画設定XMLファイル名（拡張子不要）をidとして付加します

原理的には、SetVariable() を用いてプレイヤーFLASH内の変数「id」を書き換えれば、[idの値].xml で設定されている動画に切り替わる、と言う流れとなります。ソースについては各々工夫してみてください。

TOP

その他のアドバイス

初期設定XMLファイル「flaver.xml」とプレーヤー「flaver.swf」には自由にファイル名を設定できますが、必ず双方に同一のファイル名を与える必要があります。
初期設定XMLファイル中の <path> 要素には、別サーバーへ動画ファイルを配置する場合に備えて、httpによるURL表記でも指定できます。但し、その場合、接続先のサーバーのルートに crossdomain.xml を設置する必要があります。詳しくは Adobeのサイトのセキュリティに関する問題をご覧ください
XMLファイルの作成ルールとして、初期設定XMLでは <rexef> タグに type="init" を指定し、動画設定XMLでは <rexef> タグに type="file" を指定します。また <path> 要素は初期設定XMLにのみ有効です。

例）初期設定XMLファイルの記述例
```
<rexef id="FLAVER" version="1.0" type="init">
  <path></path> 
  省略
</rexef>
```
例）動画設定XMLファイルの記述例
```
<rexef id="FLAVER" version="1.0" type="file">
  省略
</rexef>
```

XMLファイル中の <path> 要素は初期設定XMLにのみ有効です。その他の要素は初期設定XML・動画設定XMLともに共通要素です。また、共通要素が初期設定XMLと動画設定XMLで重複した場合、動画設定XMLの方の設定が優先されます。これにより一部の動画のみ別の設定を与えることが可能になります。

初期設定XMLファイルと動画設定XMLファイルの共通要素

<file></file> <!-- FLV動画ファイル名 (拡張子は小文字) -->
<time></time> <!-- 動画トータル時間 [00:00] (最大59:99) -->
<title></title> <!-- 動画タイトル -->
<full></full> <!-- 別ウィンドウ起動ボタンの有無 [true|false] (省略時 false) -->
<auto></auto> <!-- オートプレイ [true|false] (省略時 true) -->
<color></color> <!-- プレイヤー背景色 [#RRGGBB|0xRRGGBB] (省略時 #EAEAFB) -->
<volume></volume> <!-- 音量の初期値 [0~100] (省略時クッキー有り) -->
<logo></logo> <!-- 外部SWFファイル名(右下に表示) * プレーヤーのhtmlパスを基点で -->

FLV動画を準備される際は、目的のトータル再生時間よりも若干長め（+0.5～1秒程度）に作成されることをオススメします。例えばこのページで紹介している各サンプル動画の場合でも、表記上は15秒（00:15）としてありますが、実際の動画は15.5秒程度になっています。この調整により、タイムスライダの終了前後の挙動がより確実になります。（但し、この調整をおこなった場合でも、終了直前でスライダが止まる場合がありますが、その場合は停止ボタンを押してから再度再生させてください）

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

現時点で『 FLAVER 』に関する解説書はツールに付属していません
上記の使用例をご覧頂き、設置可能な方のみご利用ください。ご利用に関しましては一切のサポートはございませんので予めご了承くださいませ。

プレーヤーに関する機能

設定に関する機能

1つの動画のみを貼り付ける最小構成のケース

複数のムービーを用意しIDで呼び出して貼り付けるケース （以下は3つの例）

例） movie.flv のための movie.xml の設定記述例

例） movie2.flv のための movie2.xml の設定記述例

例） movie3.flv のための movie3.xml の設定記述例

例） movie.flv のための タグ記述例

例） movie2.flv のための タグ記述例

例） movie3.flv のための タグ記述例

JavaScript からの動画切り替え方法

例） JavaScript の記述例

例） プレイヤーの記述例 （1つのみ設置）

例） 動画切り替えボタンの記述例

例） 初期設定XMLファイルの記述例

例） 動画設定XMLファイルの記述例

初期設定XMLファイルと動画設定XMLファイルの共通要素

複数のムービーを用意しIDで呼び出して貼り付けるケース（以下は3つの例）

例） movie.flv のためのタグ記述例

例） movie2.flv のためのタグ記述例

例） movie3.flv のためのタグ記述例

例）プレイヤーの記述例（1つのみ設置）

例）動画切り替えボタンの記述例

例）初期設定XMLファイルの記述例

例）動画設定XMLファイルの記述例