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

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

FLAVER 3.0 設置方法

サーバーに基本構成（専用フォルダとプレーヤー本体）を設置する

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

プレイリストXMLを利用する場合の設置方法
    1. FLAVER 3.0 をサーバーへ設置する
    2. FLV動画を準備してサーバーへ配置する
    3. プレイリストXMLを作成してサーバーへ配置する
    4. プレーヤーソースをページに貼付する

XML無しでプレイヤーに直接ファイルを指定する場合の設置方法
    1. FLAVER 3.0 をサーバーへ設置する
    2. FLV動画を準備してサーバーへ配置する
    3. プレーヤーソースをページに貼付する

FLAVER 3.0 は複数のプレイリスト全てに対して本体を共用できますので、 予めサーバーの判りやすい位置に本体を配置しておくことをお勧めします。

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

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

flaver3        - フォルダ
 └ flaver.swf - FLAVER本体

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

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

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

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

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

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

TOP

プレイリストXMLを利用する場合の設置方法

  1. 動画・音楽ファイルを準備し、サーバーのルートに以下のように配置

    playlistA      - プレイリストAフォルダ
 ├ flaver.xml - プレイリストXMLファイル * 作成方法は次項を参照
 ├ A-01.flv   - 動画FLVファイル
 ├ A-02.mp4   - 動画MP4ファイル
 ├ A-03.mp3   - 音楽MP3ファイル
 ├ A-01.gif   - サムネイル画像 1 (省略可)
 ├ A-02.png   - サムネイル画像 2 (省略可)
 └ A-03.jpg   - 画像 3 (省略可)

    これにより、プレイリストXMLのパスは、 

    プレイリストAのプレイリストXMLパス：/playlistA/flaver.xml

    となるはずです。

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

  2. プレイリストXMLファイルを作成する

    まず、FLAVER 3.0 標準スキーマによるプレイリストXMLファイル flaver.xml flaver.xml の基本フォーマットは以下のようになります。

    FLAVER 2.0 とは互換性がありませんのでご注意ください 

    <?xml version="1.0" encoding="utf-8"?>
<flaver version="3.0" xmlns="http://rexef.com/FLAVER3.0">

  <!-- 初期設定 (省略可)   ()内は省略時のデフォルト値 -->
  <init>
    <title></title>         <!-- タイトル -->
    <color></color>         <!-- (0x666666) | 0x000000 | #000000 -->
    <bgcolor></bgcolor>     <!-- (0xECF0F3) | 0xFFFFFF | #FFFFFF -->
    <image></image>         <!-- 起動画面用画像 -->
    <autoplay></autoplay>   <!-- true | (false) -->
    <aspect></aspect>       <!-- (auto) | just | [w]:[h] -->
  </init>

  <!-- 動画設定 (いくつでも配置可/最低1セット必須) -->
  <data>
    <file></file>       <!-- 動画・音楽ファイルパス (必須) -->
    <image></image>     <!-- 画像・サムネイルパス -->
    <title></title>     <!-- タイトル -->
  </data>

</flaver>

    上記の基本ソースでは他の多くの機能が省略されています。
    より詳細な設定項目や他の汎用XMLについてはこちらをご覧ください。

    FLAVER 3.0 のプレイリストXMLの基本構文は <flaver><init /><data /></flaver> となり、 初期設定を <init /> 内にまとめ、動画設定を <data /> 内にまとめます。

    動画設定 <data /> は、いくつでも無制限に配置でき、記述した順がそのままプレイリスト再生順となります。 その点を除けば基本的に各要素の記述順に制限はありません。

    タイトルを省略すると自動的にファイル名が割り当てられます。

    文字・ボタン色 <color /> やスキンの背景色 <bgcolor /> は 一般的なウェブカラー形式で、#RRGGBB 形式や 0xRRGGBB 形式が利用できます。 仮に真っ青にするなら #0000FF あるいは 0x0000FF となります

    <init /> の <image /> へ画像を設定した場合、 プレイヤー起動画面用の画像としてロードされます。 省略した場合はプレイリストの1ファイル目の画像が割り当てられます。

    <data /> の <image /> へ画像を設定した場合、 リスト表示では 60×45 程度にアスペクト比を保持しつつスムーズに縮小して表示されますので、 縦横のサイズは意識せずに自由なサイズの画像を設定可能です（スムージング処理によりギザギザになりません）。
    省略した場合は、動画ファイルなら <getmeta /> 設定により自動的にサムネイルが生成されます。 詳しくはすべての設定項目をご覧ください。

    上記のフォーマットに従い、プレイリストA の各プレイリストXMLは以下のようになります。 

    <?xml version="1.0" encoding="utf-8"?>
<flaver version="3.0" xmlns="http://rexef.com/FLAVER3.0">

  <init>
    <title>プレイリストA</title>
  </init>

  <data>
    <file>/playlistA/A-01.flv</file>
    <image>/playlistA/A-01.gif</image>
  </data>

  <data>
    <file>/playlistA/A-02.mp4</file>
    <image>/playlistA/A-02.png</image>
  </data>

  <data>
    <file>/playlistA/A-03.mp3</file>
    <image>/playlistA/A-03.jpg</image>
  </data>

</flaver>

    上記の例は一般的な最小構成です。 すべての設定項目の確認はこちら

    <image /> を 省略した場合は、動画ファイルなら <getmeta /> 設定により自動的にサムネイルが生成されます。 詳しくはすべての設定項目をご覧ください。

    上記ソースを UTF-8 にて flaver.xml /playlistA/flaver.xml へ保存

  3. ページへ ウェブプレイヤー FLAVER 3.0 を貼る

    目的のページへプレーヤーソースを貼るには、従来通り <object> タグにより記述する方法や、 SWFObject 等のスクリプトを利用して貼付する方法がご利用いただけます。

    従来通り <object>タグで プレイリストA用のプレーヤーを貼る
    <object data="/flaver3/flaver.swf"
  type="application/x-shockwave-flash" width="330" height="230">
<param name="movie" value="/flaver3/flaver.swf" />
<param name="FlashVars" value="xml=/playlistA/flaver.xml" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
</object>
    SWFObject を用いてプレイリストA用のプレーヤーを貼る
    <script type="text/javascript" src="swfobject.js"></script>
<div id="playlistA">ここにプレイヤーが表示されます</div>
<script type='text/javascript'>
var list1 = new SWFObject('/flaver3/flaver.swf','flaver','330','230','9');
list1.addParam('flashvars','xml=/playlistA/flaver.xml');
list1.addParam('allowfullscreen','true');
list1.addParam('allowScriptAccess','always');
list1.write('playlistA');
</script>

    プレイヤーHTMLソース簡単作成フォームもご活用ください。

    SWFObject についての解説は割愛します

  4. プレイヤー貼付ソースの注意事項

    プレーヤーパス は先述の通り、絶対パス（またはhttp URL）にて記述してください

    XMLの指定方法は、FlashVars を用いて、プレイヤーパスとは分離して記述してください。 従来の ?xml= に続くクエリー（引数）をプレイヤーパスに渡す方法では、 一部のブラウザでプレイヤーが生成されない場合があります。

    allowFullScreen の記述はフルスクリーンを実装するために必須となります。
    allowScriptAccess の記述は音楽プレイヤーサイズ時のフルスクリーン案内アラート実現のために必須となります。
    また、ブラウザによってフルスクリーンが機能しなくなる場合があるので、wmode 属性（transparent）は指定しないでください。 （2009/08/06現在、主要ブラウザにて不具合が解消されたことを確認したため制限を解除しました）
    ブラウザによってCPU負荷が大きくなる場合があるため、wmode 属性（transparent）はなるべく指定しないでください。（2009/09/15）
    尚、<param name="allowScriptAccess" value="always" /> は不要です。
    音楽プレイヤーサイズでの貼付時に案内アラートを出すために、 <param name="allowScriptAccess" value="always" /> が必要になりました。（2009/10/01）

TOP

XML無しでプレイヤーに直接ファイルを指定する場合の設置方法

プレイリストXML無しで単体の動画や音楽ファイルを貼る

もっとも簡単に動画や音楽を公開する方法として、単に1つのファイルをページへ貼付したいだけであれば、 該当ファイルと FLAVER 3.0 さえあれば、プレイリストXML無しでも貼付する事ができます。 その場合は、ページへのプレーヤー貼付ソースを <object> タグで貼る際に、 ファイルパスを FlashVars を用いて file=ファイルパス で渡してください。

従来通り <object>タグで 単体ファイルを貼る
<object data="/flaver3/flaver.swf"
  type="application/x-shockwave-flash" width="330" height="230">
<param name="movie" value="/flaver3/flaver.swf" />
<param name="FlashVars" value="file=ファイルパス&その他の設定..." />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
</object>
SWFObject を用いて単体ファイルを貼る
<script type="text/javascript" src="swfobject.js"></script>
<div id="player1">ここにプレイヤーが表示されます</div>
<script type='text/javascript'>
var play1 = new SWFObject('/flaver3/flaver.swf','flaver','330','230','9');
play1.addParam('flashvars','file=ファイルパス&その他の設定...');
play1.addParam('allowfullscreen','true');
play1.addParam('allowScriptAccess','always');
play1.write('player1');
</script>
その他の設定部分の与え方の例 (&でいくつでも連結できます)
<param name="FlashVars" 
  value="file=ファイルパス&image=画像パス&cookie=false&autoplay=true" />
【注意】 FLAVER では、すべての設定を FlashVars に渡す仕様となっておりますので、 以下のように、param を増やしてに個別に渡しても認識されませんのでご注意ください。 例示された param 以外増やす必要は全くありません。↓間違った記述例 
<param name="file" value="/movie/movie01.flv" />
<param name="cookie" value="false" />
<param name="autoplay" value="true" />

ファイルパス以外の設定も渡せますが、設定可能なファイル数は1点のみです。

設定を & で連結して渡す際には、厳格には &amp; と書くべきです （HTMLのルール）

プレイヤーHTMLソース簡単作成フォームもご活用ください。

SWFObject についての解説は割愛します

その他の注意事項はプレイヤー貼付ソースの注意事項を参考にしてください。

TOP

XMLと直接ファイルを同時指定する場合の設置方法

プレイリストXMLと 動画や音楽ファイルを同時に指定して貼る

例えば既存のプレイリストXMLを編集せずに、あとから1ファイルだけプレイヤーに追加したい場合でも、 XML指定手順 と 直接ファイル指定手順を併用するような形で記述することが可能です。 その際は、<object> タグに、XMLパスとファイルパスを FlashVars を用いて xml=XMLパス&file=ファイルパス で渡してください。

従来通り <object>タグで 単体ファイルを貼る
<object data="/flaver3/flaver.swf"
  type="application/x-shockwave-flash" width="330" height="230">
<param name="movie" value="/flaver3/flaver.swf" />
<param name="FlashVars" value="xml=XMLパス&file=ファイルパス" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
</object>
SWFObject を用いて単体ファイルを貼る
<script type="text/javascript" src="swfobject.js"></script>
<div id="playlistA">ここにプレイヤーが表示されます</div>
<script type='text/javascript'>
var list1 = new SWFObject('/flaver3/flaver.swf','flaver','330','230','9');
list1.addParam('flashvars','xml=XMLパス&file=ファイルパス');
list1.addParam('allowfullscreen','true');
list1.addParam('allowScriptAccess','always');
list1.write('playlistA');
</script>

ファイルパス以外の設定も渡せますが、追加可能なファイル数は1点のみです

設定を & で連結して渡す際には、厳格には &amp; と書くべきです （HTMLのルール）

追加したファイルはプレイリストの先頭（一番上）に表示されます。

プレイヤーHTMLソース簡単作成フォームもご活用ください。

SWFObject についての解説は割愛します

その他の注意事項はプレイヤー貼付ソースの注意事項を参考にしてください。

TOP

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

RSS 1.0 Atom 1.0

Valid XHTML 1.0 Strict Valid CSS!