Flowplayer でRTMP形式の動画を再生する方法

Red5 でストリーミングサイトやビデオチャットを構築する際にただ埋め込むだけでは味気ないと思った方は Flowplayer というプレイヤーを使ってみてはどうでしょうか。シンプルでオシャレなデザインで使い方も簡単ですのでお勧めです。以下にその導入方法をまとめます。

導入は以下の流れで行います。

• 必要なファイルのダウンロード
• 埋め込む
• デモ(画像)

必要なファイルのダウンロード

公式 から必要なファイルをダウンロード。必要なファイルは以下(2011/12/22 現在)。

• flowplayer.rtmp-3.2.3.swf
• flowplayer.rtmp-3.2.3.zip
• flowplayer.rtmp-3.2.3-src.zip

ダウンロードしたファイルを解凍。使用するファイルは以下の 3 つ。

• flowplayer-3.2.7.swf : プレイヤー
• flowplayer.rtmp-3.2.3.swf : RTMPプロトコルを読み込ませる為のプラグイン
• flowplayer-3.2.6.min.js : API

埋め込む

head タグに以下を追加。

body 内に以下のコードを追加。場所は追加したいところで。

公式ページの「Live Stream」の項目を参考に説明します。
13 行目に関しては理解していない部分が多いので、参考ページの英訳と「Flash Media Server 4.5 デベロッパーズガイド」を参考に(かなり)簡単に載せています。もっと詳しく知りたい方は個人で調べてください。

行	説明
4	id の紐付けと プレイヤー(flowplayer-3.2.7.swf)のURI。
5	動画ファイルに関する設定。
6	ライブストリーミングを利用するので true を選択。
7	ライブストリームのチャンネル名。
8	plugins の項目と紐付け。plugins を使用する際に追加。
10	プラグインに関する設定。
11	8 行目で紐付けした部分。
12	RTMPプロトコルを読み込ませる為のプラグイン(flowplayer.rtmp-3.2.3.swf)のURI。
13	サーバからストリームの長さを検出。
14	ライブストリームのURL。

デモ(画像)

画像で申し訳ないのですが、デザインは以下のようになります。