デザイン,ユーザビリティ,マーケティングなどの観点からwebについて綴っていきます

最近、動画を扱う仕事がちょこちょこあるんだけど、そのたびに調べてる気がするので、この機会にまとめ。

動画にもwmv形式とかmov形式とか色々種類があるけど、今回はFLASH内でflvファイルを再生するパターンについて。

まずはデモをご覧ください。 ⇒動画再生のデモはこちら

こんな感じで動画を再生したい時のチュートリアルというか、注意点。
はまってしまう一番のポイントはパスの指定。skinやflvへのパスの通し方を忘れてしまったら下の図を見返すようにしよう。

簡単に解説。

（1）スキンへのパス指定

flash(=flash.swf)からスキン(=skin.swf)を呼び出す際は、flashが配置されるHTMLファイル(=index.html)からのパスを指定すること。（上図の例の場合：swf/skin.swf）

（2）flvファイルへのパス指定

flash(=flash.swf)にflv(=movie.flv)を読み込む際は、flash自体からの相対パスを指定する。（上図の例の場合：../flv/movie.flv）

ここで注意したいのは、flaファイルのプレビュー時とか、ローカルで確認する際に動画やスキンが表示されないこと。サーバにアップすればちゃんと表示されるので慌てるべからず。

ということで、フォルダ構成はこんな感じ。

SteelExternalPlaySeekMute.swfって長ったらしく書いてあるのが、デモページで使ってるスキン。flashのデフォルトパターンとして何種類か用意されてるので、好きなのを選べば良い。

自分でスキンをカスタマイズすることもできるけど、なにかとゴニョゴニョする必要があるので、その件はまた別の機会に。

理屈はこのくらいで、あとは実装。flashでの操作を以下で解説。

（A）動画を読み込み

まずは、動画ファイルをflashに読み込ませる。[ファイル＞読み込み＞ビデオの読み込み]から。wmvとかmovとかでも、flashがflv形式にエンコードしてくれるので安心、安心。

（B）動画の配信方法を指定

「Webサーバからのプログレッシブダウンロード」を選んでおこう。ていうか、この方法しか使ったことがないだけなんだけど、何か？

（C）使用するスキンを選択

プルダウンから好きなスキンを選ぶべし。デフォルトで入ってるスキンはロクなのが･･･もとい、クラシックなものが多いので、やむなくSteelExternalPlaySeekMute.swfの使用頻度が多め。

（D）スキンと動画のパスを指定

動画とスキンの読み込みが終わると、ステージに「FLVPlayback」なるオブジェクトが現れる。FLVPlaybackを選択した状態で「パラメータ」パネルを開くと、「スキン」と「動画」のパスが指定できる。

「contentPath」が動画へのパス、「skin」がスキンへのパスとなるので、最初の方に書いた「パスの指定」の項を参考に設定すべし。

ここまで来れば、あとはパブリッシュするだけ。FlashPlayer8以上でパブリッシュしないと動画が再生できないっぽいので要注意。

とはいっても、FlashPlayer8の普及率は99%近いし、ほぼ問題ないかと。新しいバージョンがでるたびにため息がでるWind○ws Media Playerとは大違いだ。再生できないケースが多すぎませんか？、Micros○ftさん。