FLVScript ～ Flash プレイヤー操作 JavaScript ライブラリ

Outline

FLVScript とは何ですか？
FLVScript の実行環境
インストール
使用方法
ソースコードおよび関連文書へのリンク

FLVScript とは何ですか？

FLVScript は、JW FLV Media Player 中の Flash Media Player を操作するための JavaScript ライブラリです。

JW FLV Media Player では、SWFObject 1.5 という有名な Flash 用の JavaScript ライブラリが附属しています。

ただし、非常に高機能であり、単純なことを行う場合でも、それなりの記述をしなければなりません。JavaScript を理解してるのであれば、この SWFObject を利用した方が良いのでしょうが、そうでなければ、敷居が若干高くなることも否めません。

そこで、SWFObject を単純化し、一般的な Flash 用ではなく、JW FLV Media Player に特化した JavaScript ライブラリを作成しました。

なお、本ライブラリは、JW FLV Media Player Ver 3.16 専用です。それ以外のバージョンでは、正常に機能しませんので、ご注意ください。

FLVScript の実行環境

FLVScript の中核は、JW FLV Media Player と browser.js という JavaScript のライブラリになります。

つまり、JavaScript が動作するブラウザであれば、何でも良いのですが、実際には、制限を加えています。

すなわち、ブラウザチェックの部分で以下のブラウザを推奨し、それ以外は非推奨としています。

Windows : Internet Explorer 7 以上
Windows : Firefox 2 以上
Windows : Safari 3 以上
Windows : Opera 9 以上

Mac : Firefox 2 以上
Mac : Safari 2 以上
Mac : Opera 9 以上

また、Adobe Flash Player のバージョンは、9 以上でないと動作しません。

インストール

プロジェクトページの最新リリース情報から最新バージョンをダウンロードします。
ダウンロードしたファイル (ZIP形式) を適当なディレクトリに解凍します。

以上で、インストールは終了です。実際に必要となるファイルは、つぎの２つだけです。それ以外はサンプルなどになります。

browser.js (JavaScript 本体)
mediaplayer.swf (JW FLV MEDIA PLAYER 3.16 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" />
<title>タイトル</title>
<script type="text/javascript" src="browser.js" charset="UTF-8"></script>
</head>
<body>
<h1>JavaScriptを利用したFlash Videoの再生</h1>
<noscript>
<p>本ページはJavaScriptを使用しています。
JavaScript機能をONにしてください。</p>
</noscript>
<script type="text/javascript"><!--
Browser.flashPlayer("mediaplayer.swf", "sample.flv", 320, 262);
//--></script>
</body>
</html>

この例では、simple.html、browser.js、mediaplayer.swf、sample.flv をすべて同じディレクトリに配置しています。

まず、browser.js を組み込むための部分が、つぎの記述になります。

<script type="text/javascript" src="browser.js" charset="UTF-8"></script>

実際に JW FLV MEDIA PLAYER (mediaplayer.swf) を呼び出している部分は、つぎの記述になります。

<script type="text/javascript"><!--
Browser.flashPlayer("mediaplayer.swf", "sample.flv", 320, 262);
//--></script>

この指定の書式は、つぎのようになっています。

Browser.flashPlayer(
    "mediaplayer.swf",
    "sample.flv",
    320,
    262
);

第1引数： mediaplayer.swf への URL
第2引数：再生する FLV ファイルへの URL
第3引数：プレイヤーの横サイズ (ピクセル)
第4引数：プレイヤーの縦サイズ (ピクセル)

ただし、この方法では、Internet Explorer では、正しく表示することができません。正しく表示するためには、つぎに述べるブラウザのチェックを行う必要があります。

ブラウザチェックの使い方

browser.js では、3種類のチェックを行うことができます。

チェックのみを行い、チェック結果の表示は行わない。
チェックを行い、エラー (非推奨ブラウザ) の場合、メッセージを p 要素で出力する。
チェックを行い、エラー (非推奨ブラウザ) の場合、警告ダイアログで出力する。

チェックのみを行い、チェック結果の表示は行わない

この場合、browser.js をテキストエディタで修正します。browser.js の最下部分に以下のような記述があります。

// で始まる行はコメントアウトされます。
//Browser.checkBrowser(0);	//メッセージ非表示
//Browser.checkBrowser(1);	//p要素でメッセージ表示
//Browser.checkBrowser(2);	//警告ダイアログでメッセージ表示

ここで、メッセージ非表示部分の行頭にある // を削除します。

// で始まる行はコメントアウトされます。
Browser.checkBrowser(0);	//メッセージ非表示
//Browser.checkBrowser(1);	//p要素でメッセージ表示
//Browser.checkBrowser(2);	//警告ダイアログでメッセージ表示

チェックを行い、エラー (非推奨ブラウザ) の場合、メッセージを p 要素で出力する。

この場合には、エラーがある場合にメッセージを p 要素で出力したい body 要素内の位置に、以下のように記述します。

<script type="text/javascript"><!--
Browser.checkBrowser(1);	//p要素でメッセージ表示
//--></script>

もし、エラーがある場合には、以下のような p 要素を出力します。スタイルを個別に指定したければ、スタイルシートを id セレクタを利用してください。

<p id="checkBrowserMessage">お使いのブラウザバージョンでは、正常に表示できない可能性があります。</p>

チェックを行い、エラー (非推奨ブラウザ) の場合、警告ダイアログで出力する。

この場合、browser.js をテキストエディタで修正します。browser.js の最下部分に以下のような記述があります。

// で始まる行はコメントアウトされます。
//Browser.checkBrowser(0);	//メッセージ非表示
//Browser.checkBrowser(1);	//p要素でメッセージ表示
//Browser.checkBrowser(2);	//警告ダイアログでメッセージ表示

ここで、警告ダイアログでメッセージ表示部分の行頭にある // を削除します。

// で始まる行はコメントアウトされます。
//Browser.checkBrowser(0);	//メッセージ非表示
//Browser.checkBrowser(1);	//p要素でメッセージ表示
Browser.checkBrowser(2);	//警告ダイアログでメッセージ表示

プレイヤーチェックの使い方

browser.js では、Flash Player ver 9 以上がインストールされているか、3種類のチェックを行うことができます。

チェックのみを行い、チェック結果の表示は行わない。
チェックを行い、エラー (組み込まれていない) の場合、メッセージを p 要素で出力する。
チェックを行い、エラー (組み込まれていない) の場合、警告ダイアログで出力する。

チェックのみを行い、チェック結果の表示は行わない

メッセージの表示を行わないのであれば、とくに何もする必要はありません。プレイヤー起動時にチェックを行います。ただし、その場合も仮にエラーがあっても何もしません。

チェックを行い、エラー (組み込まれていない) の場合、メッセージを p 要素で出力する。

この場合には、エラーがある場合にメッセージを p 要素で出力したい body 要素内の位置に、以下のように記述します。

<script type="text/javascript"><!--
Browser.isFlashPlugin(1);
//--></script>

もし、エラーがある場合には、以下のような p 要素を出力します。スタイルを個別に指定したければ、スタイルシートを id セレクタを利用してください。

<p id="checkFlashMessage">Flash ver.9 or later プラグインがインストールされていません。</p>

チェックを行い、エラー (組み込まれていない) の場合、警告ダイアログで出力する。

この場合、browser.js を html 文書に組み込み直後に、以下のように記述します。

<ascript type="text/javascript" src="browser.js" charset="UTF-8"></script>
<script type="text/javascript"><!--
Browser.isFlashPlugin(2);
//--></script>

プレイヤーの設定

<?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" />
<title>タイトル</title>
<script type="text/javascript" src="browser.js" charset="UTF-8"></script>
<script type="text/javascript"><!--
Browser.checkBrowser(2);
Browser.isFlashPlugin(2);
//--></script>
</head>
<body>
<h1>JavaScriptを利用したFlash Videoの再生</h1>
<noscript>
<p>本ページはJavaScriptを使用しています。
JavaScript機能をONにしてください。</p>
</noscript>
<script type="text/javascript"><!--
Browser.setColor('0xcccccc', '0x000000', '0x0000ff', '0x000000');
Browser.setAction(true, true, false, 80);
Browser.setNavigation(true, true, true, true);
Browser.flashPlayer("mediaplayer.swf", "sample.flv", 320, 262);
//--></script>
</body>
</html>

この例では、sample.html、browser.js、mediaplayer.swf、sample.flv をすべて同じディレクトリに配置しています。

まず、browser.js を組み込み、その後、ブラウザチェック、プレイヤーチェックを警告ダイアログ形式で行っています。つぎの記述が、その部分になります。

<script type="text/javascript" src="browser.js" charset="UTF-8"></script>
<script type="text/javascript"><!--
Browser.checkBrowser(2);
Browser.isFlashPlugin(2);
//--></script>

では、プレイヤー組み込み部分について見よう。これは、次のように記述している。

<script type="text/javascript"><!--
Browser.setColor('0xcccccc', '0x000000', '0x0000ff', '0x000000');
Browser.setAction(true, true, false, 80);
Browser.setNavigation(true, true, true, true);
Browser.flashPlayer("mediaplayer.swf", "sample.flv", 320, 262);
//--></script>

最後の行がプレイヤーの呼び出しで、これは単純な使い方の例と同様です。

Browser.flashPlayer("mediaplayer.swf", "sample.flv", 320, 262);

さて、それ以前の行の部分ですが、これの部分がプレイヤーに対する設定になっています。

Browser.setColor('0xcccccc', '0x000000', '0x0000ff', '0x000000');
Browser.setAction(true, true, false, 80);
Browser.setNavigation(true, true, true, true);

色の設定 (Browser.setColor)

色の設定は、Browser.setColor によって行います。その書式は、つぎのとおりです。

Browser.setColor (bgcolor, frcolor, lgcolor, sccolor);

引数
1. bgcolor : 背景色
2. frcolor : 前景色
3. lgcolor : ライト色 (ボタン類のマウスオーバー色)
4. sccolor : スクリーン色
指定できる値（色）：先頭を "0x" から始め、"RRGGBB" の6桁の16進色コードで指定する。

動作設定 (Browser.setAction)

プレイヤーの各種動作設定を、Browser.setAction によって行います。その書式は、つぎのとおりです。

Browser.setAction (autostart, repeat, showeq, volume);

引数
1. autostart : 自動再生 (true : 自動再生する, false : 自動再生しない)
2. repeat : 繰返し再生 (true : 繰り返す, false : 繰り返さない)
3. showeq : EQ表示 (true : EQ 表示, false : EQ 非表示)
4. volume : 音量 (0-100 の数値)

操作パネル設定 (Browser.setNavigation)

プレイヤーの各種操作ボタン類の設定を、Browser.setNavigation によって行います。その書式は、つぎのとおりです。

Browser.setNavigation (shownavigation, showstop, showdigits, usefullscreen);

引数
1. shownavigation : 操作バー (true : 表示, false : 非表示)
2. showstop : STOP ボタン (true : 表示, false : 非表示)
3. showdigits : タイマー (true : 表示, false : 非表示)
4. usefullscreen : 全画面ボタン (true : 表示, false : 非表示)

プレイリストの利用

JW FLV MEDIA PLAYER では、プレイリストを利用することができます。プレイリストを使ったサンプルは !playListSample.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" />
<title>タイトル</title>
<script type="text/javascript" src="browser.js" charset="UTF-8"></script>
<script type="text/javascript"><!--
Browser.checkBrowser(2);
Browser.isFlashPlugin(2);
//--></script>
</head>
<body>
<h1>JavaScriptを利用したFlash Video Play-Listの再生</h1>
<script type="text/javascript"><!--
Browser.setColor('0xcccccc', '0x000000', '0x0000ff', '0x000000');
Browser.setAction(true, true, false, 80);
Browser.setNavigation(true, true, true, true);
Browser.setPlayList (false, undefined, 320);
Browser.flashPlayer("mediaplayer.swf", "play.xml", 600, 262);
//--></script>
</body>
</html>

この例では、playListSample.html、browser.js、mediaplayer.swf、play.xml、sample.flv をすべて同じディレクトリに配置しています。

単一の FLV ファイルを再生する場合と異なる点は、FLV ファイルへの URL を指定する部分に、プレイリストへの URL を指定することだけです。

Browser.flashPlayer("mediaplayer.swf", "play.xml", 600, 262);

プレイリストのファイル名は、拡張子を ".xml" とし、後は、分かりやすい名前 (ただし、半角英数が好ましい) をつけます。

プレイリストの書式

プレイリストは、つぎのような XML 文書として記述します。

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
    <trackList>
        <track>
            <creator>サンプル</creator>
            <title>Flash Video サンプル</title>
            <location>sample.flv</location>
        </track>
    </trackList>
</playlist>

FLV ファイル１つに対して track 要素1つを記述します。その書式は、つぎのようになります。

<track>
    <creator>サンプル</creator>
    <title>Flash Video サンプル</title>
    <location>sample.flv</location>
</track>

creator 要素には、アーティスト名などを、title 要素には、曲名、番組名など、location 要素に FLV ファイルへの URL を記述します。

ソースコードおよび関連文書へのリンク

ソースコード

FrontPage に戻る

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

Hime - 姫

最近の更新 (Recent Changes)

2008-12-10

2008-12-08

2008-07-14

2008-07-09

最新リリース情報

Wikiガイド(Guide)

サイドバー (Side Bar)

FLVScript ～ Flash プレイヤー操作 JavaScript ライブラリ

FLVScript とは何ですか？

FLVScript の実行環境

インストール

使用方法

単純な使い方

ブラウザチェックの使い方

チェックのみを行い、チェック結果の表示は行わない

チェックを行い、エラー (非推奨ブラウザ) の場合、メッセージを p 要素で出力する。

チェックを行い、エラー (非推奨ブラウザ) の場合、警告ダイアログで出力する。

プレイヤーチェックの使い方

チェックのみを行い、チェック結果の表示は行わない

チェックを行い、エラー (組み込まれていない) の場合、メッセージを p 要素で出力する。

チェックを行い、エラー (組み込まれていない) の場合、警告ダイアログで出力する。

プレイヤーの設定

色の設定 (Browser.setColor)

動作設定 (Browser.setAction)

操作パネル設定 (Browser.setNavigation)

プレイリストの利用

プレイリストの書式

ソースコードおよび関連文書へのリンク