JW FLV PLAYER 3.11 - ウェブサイトでflvファイルを再生

デジカメで撮った動画をウェブサイトで視聴できるようにしたくて、flv再生用swfプレイヤーを探しました。

Google検索で多くひっかかったのはFlowPlayerとAny Flv Player。日本語でよく紹介されてるのはこの二つですね。

今回見つけたのがJW FLV PLAYER 3.11です。Jeroen Wijeringというオランダ人の方が製作し配布しているようです。

JW FLV PLAYERは基本的にJSで制御されていて、JSのオブジェクトをnewしてメソッドで設定値を渡すだけで簡単に設定を行うことができます。先取りで行うバッファリングの設定も秒単位で指定できるので、FlowPlayerのように複数のウィンドウでページロードがもっさりすることもありません。

導入は非常に簡単です。

まず、最新版をダウンロードし、サーバ上にアップロードします。ここではlib/jw_flvplayer/配下に配置したものとします。

次に動画を表示させたいHTMLファイルの設定です。

<script type="text/javascript" src="lib/jw_flvplayer/swfobject.js"></script>

上記のようにJSをインクルードしてから、動画のウィンドウの設定を記述します。最低限、再生させたいだけであれば、以下のような設定でOKです。

<script type="text/javascript">
	var s1 = new SWFObject("lib/jw_flvplayer/flvplayer.swf","single","425","350","7");
	s1.addParam("allowfullscreen","true");
	s1.addVariable("file","/video/sunset.flv");
	s1.addVariable("image","/images/play.jpg");
	s1.write("player1");
</script>

画面右上にロゴを表示することができます。ロゴを表示したい場合は以下のaddVariable()メソッドでロゴの画像ファイルのパスを渡します。ロゴの表示場所の指定はドキュメントを見た限り、まだないようでした。

s1.addVariable("logo","/images/logo.gif");         // display right upper

以下は再生前のウィンドウ表示のキャプチャです。

再生中にキャプションを表示する事ができます。これは現状日本語未対応のようです。

キャプションを表示したい場合は以下のようにキャプションの内容と表示時間の始点と終点を記述したxmlファイルをaddVariable()メソッドで渡します。

s1.addVariable("captions","captions.xml"); 

これまでの設定を含めて記述し直した結果、こんな感じになりました。各引数の設定の詳細については、READMEに書いてあります。

<p id="player1">
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.
</p>

<script type="text/javascript">

	var s1 = new SWFObject("lib/jw_flvplayer/flvplayer.swf","single","425","350","7");

	s1.addParam("allowfullscreen","true");
	s1.addVariable("file","/video/sunset.flv");

	/* APPEARANCE FLASHVARS */
	s1.addVariable("overstretch","true");              // true, false, fit, none
	s1.addVariable("logo","/images/logo.gif");         // display right upper

	/* PLAYBACK FLASHVARS */
	s1.addVariable("smoothing","true");
	s1.addVariable("volume","50");                     // default:80
	s1.addVariable("image","/images/play.jpg");

	/* INTERACTION FLASHVARS */
	s1.addVariable("captions","captions.xml"); 

	s1.write("player1");

</script>

また、上のように単一のファイルを再生するのではなく、複数のflvファイルのリストから選択して視聴できるプレイリストモードもあります。

プレイリストモードでは以下のようなxmlファイルをaddVariable()メソッドで渡す以外はシングルのプレイヤーとほぼ同じです。プレイリストモードではリストのシャッフル再生も可能です。

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
	<trackList>

		<track>
			<title>test</title>
			<creator>seratch</creator>
			<location>test.flv</location>
		</track>

		<track>
			<title>sunset</title>
			<creator>seratch</creator>
			<location>sunset.flv</location>
		</track>

	</trackList>
</playlist>

製作者の方が自分で運営するビデオホスティングサイトで利用しているだけあって、細やかなところまで気が利いていて、とても使いやすいですね。とりあえずつくったっていう試作品レベルではなく、自分で使い込んで改良されているなという印象です。現在進行形で新バージョンがリリースされているようです。

詳細については以下を参照。リンク先にいろいろサンプルもあります。

JW PLAYERS 3.11 README
（http://www.jeroenwijering.com/extras/readme.html）

と、ここまで書いて気づいたのですが、JW MEDIA PLAYER 3.11を使えば、flvに限らずいろんなフォーマットのファイルを扱えたのですね。。。まだ使ってないけど、こっちの方がおすすめなのかな。