Hatena::ブログ(Diary)

半径5メートル このページをアンテナに追加 RSSフィード

           なかのひと

About | Archive | Group | Haiku | Bookmark | Fotolife | Designset | この日記のはてなブックマーク数
 | 

2007年09月16日

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

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


Google検索で多くひっかかったのはFlowPlayerAny 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

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


f:id:srkzhr:20070916202138j:image



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


f:id:srkzhr:20070916202221j:image


キャプションを表示したい場合は以下のようにキャプションの内容と表示時間の始点と終点を記述した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ファイルのリストから選択して視聴できるプレイリストモードもあります。


f:id:srkzhr:20070916202204j:image


プレイリストモードでは以下のような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に限らずいろんなフォーマットのファイルを扱えたのですね。。。まだ使ってないけど、こっちの方がおすすめなのかな。

加藤加藤 2009/10/08 16:41 はじめまして。
JWplayersを調べていたらこちらのサイトが出てきたのですが
現在制作を担当していてお聞きしたい事があるのですがどちらからご連絡をすればよいでしょうか?

srkzhrsrkzhr 2009/10/08 23:11 >加藤さん
はじめまして。当方は単に動作させただけなので、お役に立てるかわかりませんが
それでもよろしければseratch__at__gmail.comまでメールして下さい。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

 |