FlashVideoをWEB上で再生する。

とある仕事で、動画をWEBサイトに載せることになりました。
内容は、アーティストからのメッセージとかそんなの。

今までなら、EMBEDタグなんかをHTMLに埋め込んで、
WindowsMediaPlayerとか、QuickTimeなんかのプラグインを利用して再生するのが
常套手段だったのですが。
それをやったら、スタッフの1人の環境で見ることが出来なかったらしく、
激しく抗議されましてね。
（まぁ多分、彼のPCのWindowsMediaPlayerが壊れてたんだと思いますが）

仕方がないので、発想を変えて、
YouTubeが見られるんなら、これも見れるだろ、ってんで、
FlashVideo（.flv）を、ページ内で再生させるようにしてみました。

IEでこのページを見ると途中で止まることがあるみたいですね…
ページ内の他のJavaScriptと干渉しあってるみたいです。
もし同じ症状の方がおられましたら、こちらも参考にしてみて下さい。
ひょっとすると、flowplayerより導入が楽かもしれません。

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

参考にしたのは、こちら。

blog @ Nero-8 Archives: Youtubeのように動画をFLV形式で公開する (FlowPlayer)
このFLV形式 & 再生するFLASH(FlowPlayer)にしておけば再生プレイヤー依存が無くなり、別ウィンドウで表示再生する必要もなくなるのでユーザフレンドリーなカタチになりました。また初期画面も好みのものを設置できるので遊べますヨ♪

導入は若干コツがいるものの、それほど難しくはないです。
前述のエントリを見ていただければ、ほぼ出来ると思いますが、一応マトメ。

1. まずは、FlowPlayerをダウンロード。

公式サイト（flowplayer.sourceforge.net）から、最新版をダウンロード。
もちろん、フリーです。

これを執筆時点での最新版は、1.17.1（2007/05/13）。

zipファイルを解凍し、できたフォルダを、
そのまま適当なディレクトリ（静的ファイルとしてアクセス可能なディレクトリ）にアップロードします。
まぁ…扱い的には、普通のFLASHと同じですね。

ここではとりあえず、トップディレクトリ直下の、libディレクトリ内に入れてみました。

2. HTMLに埋め込むコードを準備する

次に、実際にHTMLに埋め込むコードを準備します。

含まれるデータは、flowplayerの場所や、再生させるファイルの場所、
自動再生やリピートなどのオプションです。

例えば、こんな感じ。

<object type="application/x-shockwave-flash" data="/swf/flowplayer/FlowPlayer.swf" width="320" height="262" id="FlowPlayerH">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="/swf/flowplayer/FlowPlayer.swf" />
<param name="quality" value="high" />
<param name="scale" value="noScale" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="config={
videoFile: '/movie/ichiro.flv',
splashImageFile: '/movie/ichiro_thumb.jpg',
autoPlay: false,
hideControls: false,
autoBuffering: false,
loop: false,
showLoopButton: false
}" />
</object>

まず、1行目と3行目で、flowplayerの場所を設定します。

1: <object type="application/x-shockwave-flash" data="/lib/flowplayer/FlowPlayer.swf" width="320" height="262" id="FlowPlayerH">
3: <param name="movie" value="/lib/flowplayer/FlowPlayer.swf" />

ここでは、トップディレクトリ直下の、libディレクトリ内にあるので、そのように指定。
もし上手く表示できなければ、
絶対パス（/www/htdocs/lib/?など）で指定してやれば出来る…ハズ。

また、1行目では、幅と高さも指定します。
これは、動画ではなくプレイヤー自体の大きさなので、
コントロールを表示したいときは、動画自体の高さに22を加えると良いようです。
ここでは、動画のサイズが320×240になっているので、それぞれ、
幅320、高さ262で指定しています。

次に、再生させるファイルの場所を、8行目で指定。

8: videoFile: '/movie/ichiro.flv',

続く9行目、”splashImageFile”というのは、再生前に表示されているサムネイルのこと。
指定しなくても、ただ真っ白なだけなので特に問題ありません。

9: splashImageFile: '/movie/ichiro_thumb.jpg',

その下はオプション。

10: autoPlay: false, → 自動再生させるかどうか
11: hideControls: false, → コントロールの表示
12: autoBuffering: false, → バッファするかどうか
13: loop: false, → ループさせるかどうか
14: showLoopButton: false → ループボタンの表示