fHime (fHime_0.1) | 2008-07-08 10:39 |
FLV_Script (0.1a) | 2008-07-12 10:08 |
iHime (iHime_0.1) | 2008-07-08 10:37 |
JHime (0.4_004) | 2008-12-01 16:20 |
MP3FLVPlayer (0.4_002) | 2008-12-09 22:43 |
この Wiki は、MP3FLVPlayer version 0.4_001 以降を対象として記述されています。
MP3FLVPlayer は、MP3 Player および FLV Player、さらにそれらを操作するためのいくつかのJavaScriptから構成されるライブラリです。
Flash を操作するためには、SWFObject 1.5 という有名な Flash 用の JavaScript ライブラリがあります。
ただし、非常に高機能であり、単純なことを行う場合でも、それなりの記述をしなければなりません。JavaScript を理解してるのであれば、この SWFObject を利用した方が良いのでしょうが、 そうでなければ、敷居が若干高くなることも否めません。
そこで、SWFObject の代替となるスクリプトと専用のMP3プレイヤーおよびFLVプレイヤーに特化したライブラリを作成しました。
なお、本ライブラリで使用するプレイヤーは、Adobe Flex3 で作成したものです。
MP3FLVPlayer の中核は、Flash用swfファイルと JavaScript のライブラリです。つまり、JavaScript が動作し、Flashプレイヤーがインストールされているブラウザであれば、何でも良いのですが、実際には、制限を加えています。
すなわち、ブラウザチェックの部分で以下のブラウザを推奨し、それ以外は非推奨としています。
また、Adobe Flash Player のバージョンは、9 以上でないと動作しません。
* browser.js (JavaScript ライブラリ) * player.js (JavaScript ライブラリ) * FLVPlayer.swf (FLV プレイヤー : swf形式) * MP3Player_L.swf (MP3 プレイヤー : swf形式) * sample.html (サンプル HTMLファイル) * ~~sample2.html (サンプル HTMLファイル)~~ 0.4_002 削除 * sample.flv (サンプル FLV ファイル) * MySong.mp3 (サンプル MP3 ファイル)
以上で、インストールは終了です。実際に必要となるファイルは、2つの JavaScript ライブラリと 2つのswf形式プレイヤーだけです。それ以外はサンプルなどになります。
もっとも単純な使用方法の例は、以下の simple.html です。
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <meta http-equiv="Content-Script-Type" content="text/javascript" />
- <title>Flex 3</title>
- <script type="text/javascript" src="browser.js"></script>
- <script type="text/javascript" src="player.js"></script>
- </head>
- <body>
- <p>
- <script type="text/javascript"><!--
- Flash.FLVPlayer("./", "sample.flv");
- Flash.MP3Player("./", "MySong.mp3");
- //-->
- </script>
- </p>
- </body>
- </html>
この例では、simple.html、browser.js、player.js、FLVPlayer.swf、MP3Player_L.swf、sample.flv、MySong.mp3 をすべて同じディレクトリに配置しています。
まず、JavaScript ライブラリ browser.js と player.js を組み込みます。このとき組込み順序がありますので、つぎの記述通りに組み込みを行います。
実際のプレイヤーを呼び出している部分は、つぎの記述になります。
FLV プレイヤーは、Flash.FLVPlayer メソッドを、MP3 プレイヤーは、Flash.MP3Player メソッドをそれぞれ呼び出します。各メソッドの書式は、つぎのようになります。
また、もっとも単純な使用方法で表示されるプレイヤーは、それぞれ以下の大きさ(ピクセル)で固定されています。
プレイヤーの大きさを指定する場合には、プレイヤー呼び出し部分をつぎのように記述します。
つまり、各プレイヤー(FLVPlayer、MP3Player)呼び出しの一般的書式は、つぎのとおりです。
通常、高さには、60 または 80 を指定するようにして下さい。 65 とか 70 などを指定してもあまり意味がありません。
ここでは、推奨・非推奨ブラウザのチェックを組込む方法について説明します。
ブラウザのチェックを行い、非推奨ブラウザの場合、メッセージ表示を行うことができます。なお、メッセージ表示の方法には、つぎの2種類の方法があります。
非推奨ブラウザのメッセージを警告ダイアログで表示する場合は、Browser.checkBrowser メソッドの引数に数値"2"を指定して呼び出します。
実際には、JavaScript 組込み部分移行の head 要素内に記述するようにします。
非推奨ブラウザの場合には、警告ダイアログ内に以下のようなメッセージを表示します。なお、このメッセージは、browser.js を修正すれば、簡単に変更することができます。
お使いのブラウザ環境は検証されていません。正常に表示できない可能性があります。
非推奨ブラウザのメッセージを段落(p要素)で表示する場合は、Browser.checkBrowser メソッドの引数に数値"1"を指定して呼び出します。
実際には、body 要素内の適当な場所に以下のように記述します。
非推奨ブラウザの場合には、以下のようなp要素を生成してメッセージを表示します。なお、このメッセージは、browser.js を修正すれば、簡単に変更することができます。
また、この p要素に特定の id属性を指定したい場合には、Browser.checkBrowser メソッドの第2引数に id属性の値を指定します。
id属性を指定した場合には、以下のような p要素を生成します。このメッセージに特定のスタイルを適用したい場合には、この id属性の指定を利用します。
ここでは、Flash プラグインのチェックを組込む方法について説明します。
バージョン 9 以上のFlash プラグインが組込まれているかどおうかのチェックを行い、組込まれていない場合は、メッセージ表示を行うことができます。なお、メッセージ表示には、つぎの2種類の方法があります。
バージョン 9 以上のFlash プラグインが組込まれていない場合、メッセージを警告ダイアログで表示する場合は、Browser.isFlashPlugin メソッドの引数に数値"2"を指定して呼び出します。
実際には、JavaScript 組込み部分移行の head 要素内に記述するようにします。
バージョン 9 以上のFlash プラグインが組込まれていない場合には、警告ダイアログ内に以下のようなメッセージを表示します。なお、このメッセージは、browser.js を修正すれば、簡単に変更することができます。
Flash ver.9 or later プラグインがインストールされていません。
バージョン 9 以上のFlash プラグインが組込まれていないメッセージを段落(p要素)で表示する場合は、Browser.isFlashPlugin メソッドの引数に数値"1"を指定して呼び出します。
実際には、body 要素内の適当な場所に以下のように記述します。
バージョン 9 以上のFlash プラグインが組込まれていない場合には、以下のようなp要素を生成してメッセージを表示します。なお、このメッセージは、browser.js を修正すれば、簡単に変更することができます。
また、この p要素に特定の id属性を指定したい場合には、Browser.isFlashPlugin メソッドの第2引数に id属性の値を指定します。
id属性を指定した場合には、以下のような p要素を生成します。このメッセージに特定のスタイルを適用したい場合には、この id属性の指定を利用します。
FLVPlayer、MP3Player ともに以下の項目を制御することができます。
オートスタートを制御するためには、Flash.setAutoStart メソッドを使用します。引数に true を指定した場合、プレイヤーを読み込むと自動的に再生が始まります。また、false を指定した場合は、自動再生を行いません。初期状態は、false です。
プレイヤー起動時の音量を制御するためには、Flash.setVolume メソッドを使用します。引数に 0 から 100 までの音量(比率)を指定します。初期状態は、80 に設定されています。
再生が終了した後、また最初から再生を繰り返すループ再生を制御するためには、Flash.setLoop メソッドを使用します。引数に true を指定した場合はループ再生されます。また、false を指定した場合には、ループ再生は行われず、再生が終了すると先頭に巻き戻されます。初期状態は、false です。
たとえば、「自動再生する、音量の初期設定 50、ループ再生する」の場合、つぎのように記述します。なお、それぞれのメソッドは、プレイヤーの呼び出し以前に記述してあれば、順不同です。
このようにすべての制御項目を指定する場合には、一括指定できる Flash.setOperation メソッドを利用することもできます。
Flash.setOperation メソッドの引数は、つぎの書式になります。
プレイヤー全体やボタンの色などの外観を設定することができます。
プレイヤーの色(これをプレイヤーの背景色といいます)を設定する場合は、Flash.setBgColor メソッドを使用します。引数には、色コードを "0xRRGGBB" 形式で設定します(引数値を引用符で囲むことに注意して下さい)。
また、プレイヤー上のタイムコード文字列や再生ボタン、停止ボタンの記号の色(これをプレイヤーの前景色といいます)を設定する場合には、Flash.setColor メソッドを使用します。引数には、色コードを "0xRRGGBB" 形式で設定します(引数値を引用符で囲むことに注意して下さい)。以下の例では、背景色を薄い緑(0xccffcc)、前景色を青(0x0000ff)に設定しています。
また、背景色と前景色を一括で指定することもできます。その場合には、Flash.setPlayerColor メソッドを使用します。このメソッドの書式は、つぎのとおりです。
先の例を、Flash.setPlayerColor メソッドで書き換えるとつぎのようになります。
操作系の色設定として、再生、停止ボタンにポインタをロールオーバーしたときの色、再生ファイルローディング状況を表示するロードバー、再生状況を表示するプレイバーの各色を設定することができます。
操作系の色設定として、ロールオーバーしたときの色設定には、Flash.setRollOverColor メソッド、ロードバーの色設定には、Flash.setLoadBarColor メソッド、プレイバーの色設定には、Flash.setPlayBarColor メソッドをそれぞれ使用します。各メソッドの引数には、色コードを "0xRRGGBB" 形式で設定します(引数値を引用符で囲むことに注意して下さい)。
以下の例では、ロールオーバー色に濃い赤("0xcc0000")、ロードバー色に赤("0xff0000")、プレイバー色に緑("0x00ff00")を設定しています。なお、実際の色は透過表示されるので、指定した色よりは薄く表示されます。
また、ロールオーバー色、ロードバー色、プレイバー色を一括で指定することもできます。その場合には、Flash.setOperationColor メソッドを使用します。このメソッドの書式は、つぎのとおりです(バージョン 0.4_001 と 0.4_002 以降では書式が異なります)。
先の例を、Flash.setOperationColor メソッドで書き換えるとつぎのようになります。0.4_002 の場合
先の例を、Flash.setOperationColor メソッドで書き換えるとつぎのようになります。 0.4_001 の場合
プレイヤーのパネルに表示する文字列、およびパネルの色、文字列の色を設定できます。文字列の指定には Flash.setTitle メソッド、パネルの色指定には Flash.setTextBgColor メソッド、文字列の色指定には Flash.setTextColor メソッドを使用します。Flash.setTitle メソッドの引数には、パネルに表示する文字列を指定します。この指定を行わない場合、再生ファイルの URL が表示されます。 Flash.setTextBgColor メソッドおよび Flash.setTextColor メソッドの引数には、色コードを "0xRRGGBB" 形式で設定します(引数値を引用符で囲むことに注意して下さい)。
以下の例では、文字列 "この文字列はパネルに表示されます。"、パネルの色に "0xffcccc"、文字列の色に "0xcc6666" を設定しています。
また、パネル表示文字列、パネル文字色、パネル色を一括で指定することもできます。その場合には、Flash.setPanel メソッドを使用します。このメソッドの書式は、つぎのとおりです。
先の例を、Flash.setPanel メソッドで書き換えるとつぎのようになります。
以下に、バージョン 0.4_002 に附属している sample.html のソースを掲載しておきます。
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <meta http-equiv="Content-Script-Type" content="text/javascript" />
- <title>Flex 3</title>
- <script type="text/javascript" src="browser.js" charset="UTF-8"></script>
- <script type="text/javascript" src="player.js" charset="UTF-8"></script>
- <script type="text/javascript"><!--
- Browser.checkBrowser(2);
- Browser.isFlashPlugin(2);
- //-->
- </script>
- </head>
- <body>
- <p>
- <script type="text/javascript"><!--
- Flash.FLVPlayer("./", "sample.flv");
- Flash.MP3Player("./", "MySong.mp3");
- //-->
- </script>
- </p>
- <p>
- <script type="text/javascript"><!--
- Flash.FLVPlayer("./", "sample.flv", 320, 300);
- Flash.MP3Player("./", "MySong.mp3", 320, 60);
- //-->
- </script>
- </p>
- <p>
- <script type="text/javascript"><!--
- Flash.setOperation(true, 50, true);
- Flash.setOperationColor("0xcc0000", "0xff0000", "0x00ff00");
- Flash.setPanel("この文字列はパネルに表示されます。", "0xffcccc", "0xcc6666");
- Flash.setPlayerColor("0xccffcc", "0x0000ff");
- Flash.FLVPlayer("./", "sample.flv");
- Flash.MP3Player("./", "MySong.mp3");
- //-->
- </script>
- </p>
- <p>
- <script type="text/javascript"><!--
- Flash.setAutoStart(true);
- Flash.setVolume(50);
- Flash.setLoop(true);
- Flash.setRollOverColor("0xcc0000");
- Flash.setLoadBarColor("0xff0000");
- Flash.setPlayBarColor("0x00ff00");
- Flash.setTitle("この文字列はパネルに表示されます。")
- Flash.setTextBgColor("0xffcccc");
- Flash.setTextColor("0xcc6666");
- Flash.setBgColor("0xccffcc");
- Flash.setColor("0x0000ff");
- Flash.FLVPlayer("./", "sample.flv");
- Flash.MP3Player("./", "MySong.mp3");
- //-->
- </script>
- </p>
- </body>
- </html>
[PageInfo]
LastUpdate: 2008-12-10 00:15:01, ModifiedBy: sousyu
[License]
Creative Commons 2.1 Attribution-ShareAlike
[Permissions]
view:all, edit:login users, delete/config:members