WebページにFLVを表示して遊ぶ(3)

FLAVER 3.0

2009年10月30日(2009/11/0 5更新)

これはもう究極(?)のプレーヤー。最大の特徴は複数の動画が再生できること。対応ファイル形式はFLV・MP4・MP3です。早速こちらからダウンロードしてください。→FLV/MP4/MP3対応ウェブ埋込SWFプレイヤー FLAVER 3.0|ウェブツール|REXEF(レクセフ) 個人・商用利用問わず完全無料でご利用いただけます。というのがうれしいです。感謝!

ダウンロードしたら解凍し、このようなフォルダ構造にします(参考)。

フォルダ構造

解凍してできたflaver.swfとflaver.xmlを動画を埋め込むHTMLファイル(index.html)と同じ階層(フォルダ)に置きます。movieフォルダの中に再生したい動画ファイルとサムネイル画像を入れます。audioフォルダは音楽用です。(imgフォルダには上の説明用画像が入っています)

FLAVER 3.0 の設定をする

objectでプレーヤーを埋め込みます、HTMLソースに直接記述してください。

<object data="flaver.swf" type="application/x-shockwave-flash" width="330" height="290" name="movie01">
<param name="movie" value="flaver.swf">
<param name="FlashVars" value="file=movie/sample01.flv">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
</object>

value="file=movie/sample01.flv" ←動画ファイルの指定は flaver.swf からみた階層指定になります。
動画サイズの指定は、縦:実サイズ+50、横:実サイズ+10 です。

複数の動画を再生をする

flaver.xmlを使います。objectでファイル名の指定をxml=としてflaver.xmlを指定します
<param name="FlashVars" value="xml=flaver.xml">

<data>?</data>までがひとつのブロックです。項目の詳細はflaver.xml内に書かれているので参考にしてください。TeraPadなどのUTF-8Nに対応したテキストエディタで編集します。
<file>movie/sample01.flv</file>は動画ファイル
<image>movie/sample01.jpg</image>はサムネイル画像

<!-- ここから -->

<?xml version="1.0" encoding="utf-8"?>
<flaver version="3.0" xmlns="http://rexef.com/FLAVER3.0">
<data>
<file>movie/sample01.flv</file>
<image>movie/sample01.jpg</image>
<title>テスト1</title>
<text>某公園のスプリンクラー</text>
<author></author>
<link></link>
<time>00:00:18</time>
<size>320x240</size>
<byte>1,234KB</byte>
</data>
<data>
<file>movie/sample03.mp4</file>
<image>movie/sample03.jpg</image>
<title>テスト2</title>
<text>ベイブリッジ</text>
<author>(C)KSNET</author>
<link>http://www.k-s-net.jp/</link>
<time>00:00:30</time>
<size>320x240</size>
<byte>2,301KB</byte>
</data>
</flaver>

<!-- ここまで -->

音楽を再生をする(おまけ)

音楽(MP3)の再生はfile=で.mp3ファイルを指定します。
<param name="FlashVars" value="file=audio/sample01.mp3">
width="330" height="45" にしています。

xml=audio.xmlを指定すれば、xmlファイルを使って複数のmp3ファイルを再生できます。
<param name="FlashVars" value="xml=audio.xml">

audio.xml
<?xml version="1.0" encoding="utf-8"?>
<flaver version="3.0" xmlns="http://rexef.com/FLAVER3.0">
<data>
<file>audio/kanmon.mp3</file>
<title>関門マーチス</title>
</data>
<data>
<file>audio/ohhama.mp3</file>
<title>来島海峡の潮流状況</title>
</data>
</flaver>

関門海峡海上交通センター 来島海峡海上交通センター 来島海峡の潮流信号所


ページトップへ ページトップへ

ページトップへ