お勉強：マルチメディア - FLV動画再生の道
Webページ埋め込みでのFlash動画再生に関するメモ。世に言うOBJECT＋PARAM vs. EMBED戦争である（言わねーよ）。strictなHTMLが好きな人以外はあまり参考にならないかもしれない
※しかしこのページはValidではありません！
最終更新Sep 21, 2009
前置き
Flashのような動画をウェブ上で再生するには、HTMLソースにobject要素もしくはembed要素のいずれか記述するのが基本であるが、embed要素はブラウザ互換性は高いけれどもHTML4.01やXHTML1.0などでは使ってはいけない。またXMLではコメント内の文字列もPCDATA扱いなので、XHTMLでソースに直接JavaScriptを記述するのは好ましくないというかやってはいけない。そんなわけで、純粋にobject要素＋param要素だけで利用できる、埋め込み型のFlashプレイヤー（実体はSWFファイルになる）を探している。
単にパソコンでFLVを再生したいのならGOMでも放り込んでおけ。またMP4ファイルを埋め込む場合、一般的なエンコーダの標準設定ではほぼファイルの末尾にインデックス情報が配置されるためダウンロードしきらないと再生が始まらない。そのため順次再生させるにはあらかじめインデックス情報がファイルヘッダになるよう設定してエンコードすることに注意。詳細はFLV動画のエンコードで。
埋め込み型FLVプレイヤー
たいして知ってるわけじゃない。
- Pegasys WEB FLV Player
- JEROENWIJERING FLV Player（JW Player）
- FlowPlayer
- REXEF FLAVER
- Web FLV Player Pro （商用）
- FLV Player
Pegasys - WEB FLV Player
ペガシスのロゴがなければねえ…。曲はmegのGroove Tube。
プレイヤーの使い勝手は悪くない。ただロゴを我慢したとしてもJavaScriptでFlashVarsを記述するのはどうも苦手なのである（ま、たいていの埋め込みプレイヤーがそうだがね）。またHTMLソースへの記述はJavaScriptのみのため、object要素に独自のclass属性なりを記述したい場合は同梱されているAC_RunActiveContent.jsのコードを直接編集する必要がある。
そもそもソースに直接JavaScriptのコードを記述するのはXHTML的にNG。そりゃ後半のスクリプトを外部ファイルにすることは可能だけど、動画ごとにJSファイル用意しなきゃいけないとかソースの汎用性もクソもあったもんじゃないし全体の見通しが悪化するだけ。そんなものはテストで100点取るだけの勉強だ。これは他のプレイヤーでも同じこと、共通要素は外部ファイルにしても個別要素は個々の（X）HTMLに記述してナンボでしょ。Validかどうかと汎用性が高いかどうかは別の話。そんなわけで、俺には向かないようだ。
JEROENWIJERING - FLV Player
これで十分。バージョンアップを重ねかなり高機能になった。
JW FLV Player2.5
わりと初期のもの（このポリリズム。FLVと同じファイル名のJPEGがあれば勝手にイメージも表示してくれる。ソースはDVD（MPEG2 8Mbps）、VP6 2pass 512Kbps。
このシリーズはStrict＆Validな記述をしやすい。
<object type="application/x-shockwave-flash" width="320" height="260" data="player.swf?file=sample.flv"> <param name="movie" value="player.swf?file=movie.flv" /> <p>ポリリズム（リズム（ム（むむむ。代替コンテンツはありません。</p> </object>
プレイヤー本体（SWFファイル）がHTMLファイルのカレントにあれば、、データ（FLVファイル）の場所には相対パスも使える。
object要素にはalt属性がないので、未対応エージェントのためにp要素なりでaltに相当する記述をしておくのが作法（何）らしいよ！
JW FLV MEDIA PLAYER3.2
曲はCapsuleのSugarless GiRL。画像プレビュー表示ができないけどFLAソースもついてくるので腕に覚えのある奴ならカスタマイズできるんだろう。
ごめん、引数追加で簡単に画像表示できた。objectのheightは表示解像度のプラス20pxくらいにしてやると具合がいい（ツールバー部分な、正確には22pxらしい）。
JW FLV MEDIA PLAYER3.14
大幅にパワーアップ。サムネイル表示やリストにも対応とかなり高機能になったのだけど、インラインJavaScriptが必要になってしまったのが残念。
JavaScript必須ではないようだ。というか単にオレがFlashVarsの扱いについて知らなかっただけだわ（object＋paramではフルスクリーンなどいくつか動かない機能がある）。
シングルファイルの再生も可能だが、プレイリストを利用したときに真価が発揮される。XSPF、RSS、ASXといったXMLで記述されたリストに対応しているほか、PHP＋MySQLによるリスト生成スクリプトのサンプルソースまで用意されている。
なお対応しているのはRSS2.0（Really Simple Syndication）で、ブログなどで普及しているRSS0.91（Rich Site Summary）/1.0（RDF Site Summary）とは互換性がないことに注意。
FlashVarsは多数存在するためSETUP WIZARDが用意されている。これを見れば設定に悩むことも少ないだろう。欲を言えばobject＋param要素のサンプルコードがあれば。
追記2008-08-21：Ver4が出てた。基本的にCreative Commons licenseだけど、商用目的の場合はライセンス買ってね、とのこと。サポートするFlashVarsの解説もあった。
FlowPlayer
オープンソースなFLV Player。RED5なんかと合わせてストリーミングにも対応してるようなのだけど、ソース記述が先のJWより若干面倒かも。というかstrictな記述でどれだけの機能が動くものかしら、と軽く他のサイトで実装されてるのを試してみたけど、やはりobject＋param要素だけでは全画面に対応していなかった。だったらJW Playerでいいよ。
2009-09-21追記：気が付いたらVer3系にアップされてたのだが、object＋param要素だけではまともに動かない＆過去の互換性なしとへっぽこ仕様に生まれ損なっていた。高機能化するのは別にいいよ、そのために最小実装を見捨てたのは気にいらん。
REXEF FLAVER
たぶんこれが最も理想に近い。
FLAVER 2.0
動画再生もできるけれども、アルバム機能がウリ。画像＋BGM、なんて場合にはこれを使うとよい。サポートも終わり間近なので実装例は割愛。
FLAVER3.0
本命である。JavaScriptも利用できるが、基本的にソースの記述はobject＋param要素だけで済む。さらに読み込みファイルやサムネイル、スキンカラーなどをXMLで設定でき、プレイリスト的な運用も可能。この設定ファイルはXSPFよりも記述が楽なのでXMLがあまり得意ではない人（誰）にはありがたいだろう。しかもXSPFやATOM、ASX、RSS2.0なんかにも対応してたりするので、これらに慣れてる人にとっても都合のよい親切設計。シンプル実装と高機能化の両立をStrict＆Validで実現している理想的なプレイヤーは、他に見当たらなかった（もちろん執筆時点でな）。
曲はSweet Vacationのさよならマイデイズ、MP4。
ソースはこんな感じ。class属性のembed_movieというのはうち独自のCSS（ただのセンタリング）。
<object data="./flaver.swf" type="application/x-shockwave-flash" width="520" height="428" class="embed_movie"> <param name="movie" value="./flaver.swf" /> <param name="FlashVars" value="file=./data/Sweet_Vacation_Sayonara_My_Days.mp4 &image=./data/Sweet_Vacation_Sayonara_My_Days.jpg" /> <param name="allowFullScreen" value="true" /> <p>Sweet Vacation / さよならマイデイズ。代替リンクはありません。</p> </object>
何が素晴らしいってobject＋param要素だけでちゃんとフルスクリーンになること。さらにイメージ自動取得までやってくれる優れモノであるよ。これから設置する人にはぜひこれをお勧めしたい。ただ枠付きのデザインは好みが分かれるかも（俺は好きだがね）。なお枠の幅は4ピクセルで操作部分の高さが40ピクセルなのでプレイヤーサイズはソースの解像度にwidth8ピクセル、height48ピクセル増やしてやるとよい（再生解像度が512ｘ384なら520ｘ434でちょうどピッタリ収まる）。それにしてもmayちゃんかわいい。XML使わずに画像表示するにはJW Player同様FlashVarsにimage=URLをfileの後ろにでも追記しる。
FLAVER 3.0 設置方法 標準XMLフォーマット詳細
プレイリストを使ってみる。XMLの記述も懇切丁寧なマニュアルのおかげで悩むことはあるまい。
これ以上何を望むというのか。商用のは知らんが、フリーでこれ以上使い勝手のよいものはないだろ。
<object data="./flaver.swf" type="application/x-shockwave-flash" width="520" height="432" class="embed_movie"> <param name="movie" value="./flaver.swf" /> <param name="FlashVars" value="xml=./flaver.xml" /> <param name="allowFullScreen" value="true" /> <p>女性ボーカルが好きっ！残念ながら代替リンクはありません。</p> </object>
参考：プレイリストのXML
欲を言うなら
- autoplayでの自動再生とリスト連続再生は別の機能としてほしい（自動再生はオフで連続再生はオン、という使い方をしたい）。
- リストのloop（オールリピート）を追加してほしい。
- 音楽再生用にツールバーのみ表示している際、タイトルクリックか何かでプレイリストの呼び出しができるようにしてほしい。
- リスト表示位置の変更（左寄せ、右寄せ）ができると嬉しい。
なんだけっこうあるじゃん。これは不満というよりも期待の表れってことで。
2012-01-23追記：ver 3.0.9でloopが実装されてた！まるでここ読んでくれたかのような対応に嬉しさもひとしお。
なお、うちの環境では以前RSSを生成するのにPHP使ってた関係でAddHandler application/x-httpd-php .xmlなんて記述を.htaccessでしていたのだが、そのせいかプレイリストのXMLファイルが読み込めないエラーが発生。現状では使ってないので解除したのだけれども、この二者の設定がぶつかるケースが出てきたらどちらかの拡張子を任意のもの変えてやればよいと思われ（ex.プレイリストの拡張子を.lstにする＆AddTypeでapplication/xml指定しとく）。
Web FLV Player Pro
商用向け動画で広告入りプレイリストなんかを作りたいときに使うとよいと思う。個人サイトならJWかFLAVORで困らんだろ。
FLV Player
FlashVarsに関して
param要素やembed要素で指定する、Flashに与える変数のこと。複数の変数だとJavaScriptを介しているケースも多い。
object要素ではparam要素に<param name="flashvars" value="varname=value&varname=value..." />と記述する。embed要素はflashvars属性の値として<embed flashvars="varname=value&varname=value..." />と記述する。
どちらを使うかだが、ブラウザ対応で勝るembed要素はvalid志向な人（誰）にとってはイレギュラーな存在だし、DTD準拠のobject＋param要素は対応しているブラウザの問題が付きまとう。例えばIEはobject要素のdata属性でURIをしただけでは機能せず、safariはparam要素を解釈しない。またparam要素のname属性によるFlashVars指定も実際にはスルーされることも珍しくない。そもそもname="allowFullScreen" value="true"といった感じでFlashVarsとは別のname属性の値として記述するしている場合もあり、このへんはHTMLやブラウザの実装だけでなくFlashの作り込みでの問題かもしれん。
であればsample.swf?varname=value&varname=value…のようにGETメソッドの引数の形でパラメータを渡すほうが確実性が高いかも（最も確実なのはValidを放棄してJavaScript使うことだったりするのだが、それを認めてしまうとこのページの立場がないｗ）。FLVソースの場所を指定する、といった単純なものであればこのほうが手っ取り早いだろう。但しGETメソッドゆえ引数の長さには上限があること（64KB）、長い記述は視認性が悪化すること、XHTMLでは文字参照（特に&のことな）を用いること、同じSWFファイルを使いまわす場合でも引数が異なればキャッシュ扱いにならないため、重たいSWFではGETは不利かもしれないといった点は考慮する必要がある。まあFlashで重たいって時点でどうなのかとは思うが。
まあFlashVarsがパラメータのすべてじゃないけどね。そんな単純なものなら苦労するかいな。JavaScript≒ActionScript苦手だし、別にFlash職人になろうとしてるわけじゃないし、とりあえず最低限の知識はこんなもんだろ。