Webページ上で動画制御できるプレーヤー『FlowPlayer』の使い方

DMM Samplerのアップデートで、動作の再生をDMM標準プレーヤーからFlowPlayerに変えました。今回はその導入経緯とFlowPlayerの簡単な使い方についてまとめておきます。

プレーヤーを変えるきっかけ

前々から、JavaScriptからフラッシュ動画プレーヤー(~.swf)を操作したいなと思っていました。
DMM Samplerでいえば、「動画が切り替わった時に自動再生したい」という目標がありました。

それを実現するにはActionScript側でJavaScriptから呼び出すための設定を行う必要があるのです。
が、DMMの標準プレーヤは実際そのような設定がされているのかかが分からないため、容易ではなさそうです。
（ActionScript側のメソッド名を知る必要があるし、外部サイトから呼び出せるようにセキュリティレベルを設定されている必要がある。）

WithRelish

他に考えたこと

HTML5で用意されているvideoタグを使えばいいじゃん！と思いました。
動画コントロール用のJavaScriptメソッドが用意されているからです。
しかし問題が発生。DMM無料動画が提供している動画のソースファイルはmp4形式しか無いようなのです。

FirefoxやIEなどはvideoタグによるmp4形式動画の再生には対応していません。
そのためこの方法は断念せざるを得ませんでした・・・

HTML5 videoタグを使って動画を再生する | TechBooster

情報収集した結果FlowPlayerに行き着く

で、色々探した結果JavaScriptで動画制御が可能な「FlowPlayer」に辿り付きました。

FlowPlayer

FlowPlayerはFlash版とvideoタグ版があり、今回はFlash版を利用します。

一番簡単な使い方

まずJavaScriptソースを読み込む。

<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js""></script>

次にaタグを利用してhref属性に動画ソース（ファイル名やURL）を指定する。

<a id="player"
   href="hogehoge.mp4"
   style="display:block;width:560px;height320px;margin:0 auto"></a>

最後にflowplayerメソッドを使って動画を読み込む。

<script language="JavaScript">
  flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
</script>

これだけです。
ちなみにflowplayerが実行されると、aタグ部分が以下のようなobjectタグに置き換わります。

<a id="player" class="player" style=style="display:block;width:560px;height320px;margin:0 auto;" href="hogehoge.mp4">
  <object id="player_api" width="100%" height="100%" type="application/x-shockwave-flash"
          data="http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf" name="player_api">
  <param value="true" name="allowfullscreen">
  <param value="always" name="allowscriptaccess">
  <param value="high" name="quality">
  <param value="#000000" name="bgcolor">
  <param value="config={"playerId":"player","clip":{"url":"hogehoge.mp4"},"playlist":[{"url":"hogehoge.mp4"}]}"
         name="flashvars">
  </object>
</a>

JavaScriptから制御する

これも簡単です。例えば再生したい場合は、

<script language="JavaScript">
  flowerplayer("player").play();
</script>

一時停止したい場合は、

<script language="JavaScript">
  flowerplayer("player").pause();
</script>

簡単！これを求めていた！

ちなみにページ内のプレーヤーへのアクセスはidを指定する以外にも色々あります。

<script language="JavaScript">
  // ページ内の先頭のプレーヤーを取得
  flowplayer();  
  // インデックスを指定してページ内の2つ目のプレーヤーを取得
　flowplayer(2);

  // jQueryを読み込んでいればflowplayerの代わりに短縮形のメソッドも使える
  $f();
</script>

この他にもたくさんの機能があります。今後のアップデートも捗りそう！

そうそう、全然関係ないけど
>ljavascriptl
ll<
でコードをくくるとシンタックスハイライトしてくれるって初めて知りました・・・