FLVをWEB上で再生する（その2）

大きなバージョンアップがあったため、現行バージョンではこの解説の通りに動かない場合があります。この解説に対応したバージョンの入手と関連ドキュメントについてはエントリ最下部に掲載しています。

現行バージョンのJW FLV Media Player 4.xに対応した改訂版を掲載しました。
FLVやMP3をWEB上で再生する（その3） – JW FLV Media Player 4.x

以前、FLVファイルをWEB上で再生するためのツールを紹介しました。

FlashVideoをWEB上で再生する。 – NOBODY:PLACE – MUTTER

flowplayerというプログラムを使ったものだったのですが…
どこかでプログラムがコンフリクト（衝突）しているらしく、
このブログ上では上手く動かないようです。
FireFoxでは問題ないんですが、IEだと次のJavaScriptで止まってしまう。


理由はLiteboxかもしれないしはてなスターかもしれませんし、
prototype.jsかもしれませんがよく分かりません。

つーことで、他の場所で使っている、
超多機能かつシンプルな他のプレイヤーを使うことにしてみます。


一応、テストでは動いたので、このブログでも動く前提で今から文章書きますが、
もしかしたらアップしてみてみたら動いて無くてやっぱダメだった…という
残念なエントリになっている可能性もありますが、まぁ兎にも角にもやってみましょう。


使ったツールはこちら。

JW FLV Media Player


FLVだけでなく、画像、mp3などもカバーする多機能プレイヤーです。
にもかかわらず本体は非常に小さく（34KB）、
構成ファイル数も僅か2ファイル（しかも1つは有名なJavaScriptライブラリ）という
驚異的なシンプルさです。

1. インストール

ダウンロードしてきたファイルを解凍すると、
本体プログラムとソース、解説ファイル、サンプルなどが出てきます。
この中で必要なのは以下の2ファイル。

• mediaplayer.swf
• swfobject.js

それぞれ適当な場所にアップロードしてください。
後で指定することが出来るので管理しやすい場所で良いかと思います。

とりあえずサンプルでは、以下のように配置してみました。

2. コードを入力する

使い方には色んなパターンがあって、動画1つを紹介することも出来るし、
音楽プレイヤーとしても使えるし、
サイト内の動画を全て見せるような使い方も出来ます。
（詳しくは同梱のREADME.HTMLを見てみてください。）


ココでは、YouTubeのプレイヤーみたいな使い方をと言うことで、
こんなコードを挿入してみます。

Get the Flash Player to see this player.

動画ファイル、サムネイル画像を設定してやると、
こんな感じになります。




簡単ですね。


ちなみにコントロールバーの高さは22pxです。
なので、コード内の高さは動画の高さ+22pxを指定してやると吉です。

3. 発展的な使い方（上級者向け）

以上で、解説そのものは終わりなのですが、
このプログラムには以下のような機能が備わっています。

• プレイリストを外部ファイルから読み込む。
  • Supported Playlists
• APIを通じてJavaScriptで外部から操作可能。
  • Javascript interaction

プレイリストの場合一般的な3つの形式（XSPF/RSS/ASX）に対応しています。

詳しくは解説しませんが、簡単にサンプルを書いておくと。
例えば以下のようなプレイリストを用意して、

original: しも

http://www.nobodyplace.com



original: しも

http://www.nobodyplace.com



original: しも

http://www.nobodyplace.com

以下のように食べさせると、

Get the Flash Player to see this player.

こんな感じで表示されます。





なお、スキンの改造も可能です。
とりあえず背景色をいじるとこんな感じ。




JavaScriptについては…こんな感じかな。



» 2曲目を再生


クリックで2曲目に飛びます。
何でか、IE6では動きませんが。
いや、動いてますね。FLASHのバージョンかなぁ。詳細不明。



ともかく、かなり汎用性に富んだプログラムなので、
アイディア次第でかなり遊べるんじゃないかと思います。

よろしければお試しアレ。



…というわけで、無事に動きました。
良かった良かった。

追記: 2009/02/07

このエントリの解説は、JW mediaplayerの旧バージョン（3.x）に対応したものです。
現行のバージョン（4.x）ではパラメータのデフォルト値などに変更があるため、
意図したとおりに動かない可能性があります。

多分、現行バージョンで同じことをやれるのが一番良いのだと思いますが、
とりあえず旧バージョンの配布も行われてはいますのでリンクしておきます。


旧バージョンの入手先
http://developer.longtailvideo.com/trac/browser/tags

設定に関する仕様
http://developer.longtailvideo.com/trac/wiki/Flashvars3

プレイリストに関する仕様
http://developer.longtailvideo.com/trac/wiki/Playlists3