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

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

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


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

FLVをWEB上で再生する(その2)
参考にしたのは、こちら。

この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を加えると良いようです。
ここでは、動画のサイズが320x240になっているので、それぞれ、
幅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 → ループボタンの表示



3. コードの貼り付け


全部終わったら、
出来上がったコードを貼り付けましょう。そんだけ。


こんな感じになるはず…




おお、YouTubeっぽいw

環境に左右されにくいし、動画を公開したいときには、これが良いかもしれませんね。