久々にFlowplayerを試したので使い方の簡単なまとめ

FlowplayerのDownloadからFree Versionをダウンロードして解凍。flowplayerフォルダにあるflowplayer-3.2.15.swfをflowplayer.swfとか適当にリネームして使う。
再生位置や音量などのコントロールバーが欲しい場合はflowplayer.controls-3.2.14.swfをflowplayer.controls.swfのようにflowplayer.swfと同名にリネームして同じフォルダにおけば意図的に指定しなくても勝手に有効になる。他にもFlowplayer→Plugins→Flash Plugins→Controlbar→Downloadからflowplayer.controls-3.2.14.zipをダウンロードして解凍すると、flowplayer.controls-tube-3.2.14.swfのようにYouTubeライクなコントロールバーもある模様。
HTMLから呼び出して使う最低限必要な書式の一例。clip、url、ファイル名は「"」で囲む必要がある。

<object><embed src=flowplayer.swf flashvars='config={"clip":{"url":"test.mp4"}}'/></object>

WebサーバでswfのMIME設定がなされてない場合はtypeで指定する必要がある。embed内のパラメータは必要に応じて「"」で囲んでも良い。あと以下のように適宜改行しても問題ない模様。

<object>
<embed
  type="application/x-shockwave-flash"
  src="flowplayer.swf"
  flashvars='config={
    "clip":{
      "url":"test.mp4"
    }
  }'
>
</embed>
</object>

日本語ファイル名を使いたい場合はurlEncodingを指定する。trueは「"」で囲んではいけない。ちなみに「#」を含むファイル名は再生できない。「&」や「%」等はHTML内ではそのまま扱えないのでURLエンコードする等の対処が必要。

<object>
<embed
  type="application/x-shockwave-flash"
  src="flowplayer.swf"
  flashvars='config={
    "clip":{
      "url":"テスト.mp4",
      "urlEncoding":true
    }
  }'
>
</embed>
</object>

アスペクト比を反映させるためにはscalingを指定する。fitは「"」で囲む必要がある。

<object>
<embed
  type="application/x-shockwave-flash"
  src="flowplayer.swf"
  flashvars='config={
    "clip":{
      "url":"テスト.mp4",
      "urlEncoding":true,
      "scaling":"fit"
    }
  }'
>
</embed>
</object>

フルスクリーン再生を有効にするにはallowFullScreenを指定する。

<object>
<embed
  type="application/x-shockwave-flash"
  src="flowplayer.swf"
  allowFullScreen="true"
  flashvars='config={
    "clip":{
      "url":"テスト.mp4",
      "urlEncoding":true,
      "scaling":"fit"
    }
  }'
>
</embed>
</object>

ウィンドウ内の背景色はbgcolorで指定する。この例では背景色を黒にしている。

<object>
<embed
  type="application/x-shockwave-flash"
  bgcolor="#000000"
  src="flowplayer.swf"
  allowFullScreen="true"
  flashvars='config={
    "clip":{
      "url":"テスト.mp4",
      "urlEncoding":true,
      "scaling":"fit"
    }
  }'
>
</embed>
</object>

ウィンドウサイズはwidth、heightで指定する。

<object>
<embed
  type="application/x-shockwave-flash"
  width="640"
  height="360"
  bgcolor="#000000"
  src="flowplayer.swf"
  allowFullScreen="true"
  flashvars='config={
    "clip":{
      "url":"テスト.mp4",
      "urlEncoding":true,
      "scaling":"fit"
    }
  }'
>
</embed>
</object>

自動的に再生が始まらないようにするにはautoPlayを指定する。falseは「"」で囲んではいけない。

<object>
<embed
  type="application/x-shockwave-flash"
  width="640"
  height="360"
  bgcolor="#000000"
  src="flowplayer.swf"
  allowFullScreen="true"
  flashvars='config={
    "clip":{
      "url":"テスト.mp4",
      "urlEncoding":true,
      "scaling":"fit",
      "autoPlay":false
    }
  }'
>
</embed>
</object>

自動的に再生が始まらない場合にバッファリングしてサムネイル画像を表示するにはautoBufferingを指定する。

<object>
<embed
  type="application/x-shockwave-flash"
  width="640"
  height="360"
  bgcolor="#000000"
  src="flowplayer.swf"
  allowFullScreen="true"
  flashvars='config={
    "clip":{
      "url":"テスト.mp4",
      "urlEncoding":true,
      "scaling":"fit",
      "autoPlay":false,
      "autoBuffering":true
    }
  }'
>
</embed>
</object>

再生時にコントロールバーが自動的に消えないようにするには、autoHideをpluginsのcontrols内で指定する。falseではなく"fullscreen"を指定するとフルスクリーン時のみコントロールバーを消すことが出来る。標準のコントロールバーは26ドットの高さがあるようなので（Firefoxで確認）、heightをその分だけ大きく指定している。control内でclipと同様にurlでコントロールバーのswfを指定することも出来る。

<object>
<embed
  type="application/x-shockwave-flash"
  width="640"
  height="386"
  bgcolor="#000000"
  src="flowplayer.swf"
  allowFullScreen="true"
  flashvars='config={
    "plugins":{
      "controls":{
        "autoHide":false
      }
    },
    "clip":{
      "url":"テスト.mp4",
      "urlEncoding":true,
      "scaling":"fit",
      "autoPlay":false,
      "autoBuffering":true
    }
  }'
>
</embed>
</object>