LinuxMagic.org

オープンソースのサポートサイトを目指します。

Streaming Server

RTMP接続サンプル

Jw Player RTMP接続サンプル

懐かしい映画のトレーラで実験。
HTMLソースを読んで書き方を参考にしてください。サーバは RED5の最新版で作成しています。
Port番号は7777を利用。

※実際は映画トレーラもライセンスがあるため、下記はクリックしても再生しないようにしています。埋め込みのサンプル書式として見てください。

Street Of Fire Movie Trailer 1984
Street Of Fire Movie Trailer 1984

Spy Game Movie Trailer 2001
Spy Game Trailer:Brad Pitt

サンプル

下記はサンプルです。戸田競艇の短いシーンを撮影し作成してみました。
※IE7,IE8,Chrome,Opera,FireFoxは再生OKでした。
これは、単なるHTTPストリーミングです。そのためゲージを移動しても前には進みません。
戸田ボート
戸田ボートサンプル

FlashVideo作成

Flash Playerと言っても単独のアプリケーションで動作するものと、WEBブラウザに
埋め込まれたものがあります。

ここでは、前回紹介したFLAVERとは違ってもう少しシンプルなPlayerを紹介します。
「JW FLV MEDIA PLAYER」
上記のPlayerをダウンロードします。

現在はJW FLV Media Player 4.5というバージョンになっています。

ダウンロードすると解凍した後 readme.htmlがフォルダにあるので、これをエディター
で開き次の箇所をパクリます。※ホームページの次の記述をコピーしても良いと思い
ますがバージョンが変わると異なってくるのでそうしてください。
<script type="text/javascript" src="swfobject.js"> ① </script> <script type="text/javascript"> swfobject.registerObject("player","9.0.98","expressInstall.swf"); ② </script> <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="328" height="200"> <param name="movie" value="player-viral.swf" /> ③ <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="file=video.flv?=preview.jpg" /> ④ <object type="application/x-shockwave-flash" data="player-viral.swf" width="328" height="200"> <param name="movie" value="player-viral.swf" /> ③ <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="file=video.flv?=preview.jpg" /> ④ <p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p> </object> </object>

実際にJW FLV Media Player 4.5を解凍した際に、上記のswfファイルや画像ファイル
があるので、それを自分が作成したコンテンツに置き換えてください。
それが完了したらサーバ上に設置する際に矛盾無く正しいパスに置き換えてください。

これで動作するはずです。

【修正ポイント】

①swfobject.js の保存先

②インストールPlyer の登録処理

③WEBに埋め込むPlayer本体

④実際に再生する際のコンテンツ素材
file=xxxxxx はFlashファイル
image=xxxxx は再生前のスクリーン上の表示画像

尚、コンテンツのオリジナルファイルは当然ながら、movファイルやwmvファイル,mpegファイルでしょうから、これをFlashに変換するための変換ソフトが必要です。

動画の相互変換に関しては「えこでこツール」というオープンソースがあります。

下記のpazera video to flash converterは様々な動画形式をFlashに変換してくれる
フリーソフトです。これを使うと簡単に動画をFlash動画に変換し、flv形式または
swf形式に出力をしてくれます。操作はいたって簡単です。

http://www.pazera-software.com/products/video-to-flash-converter/

後は変換したファイルを上記の手順を参考にアップロードしてください。
これで簡単にFlash Videoのコンテンツができました。

Free Flash Player

ホームページ製作しているREXEFが開発したFlash Playerは中々いいですね。

FLVを直接読み込めますし、再生リストをPlayer上に出すので YouTube見たいな
複数の動画カタログを画面にリストして出せます。皆さんもためして見てはいかが?

REXEF

RED5導入

フリーのFLASH VIDEOサーバ RED5
皆さんも一度聞いた事はあると思いますがRED5というFLASH動画配信サーバがあります。
以前、Linuxへ導入したことはありましたが今回は改めてWindows XPに導入をしてみました。

ダウンロードは下記へアクセスしてください。

http://code.google.com/p/red5/最新版は「Red5 0.8.0 Final」です。

導入にはJAVAの環境を導入する必要があります。

http://www.java.com/ja/download/最新版はVersion 6 Update 15 です。

インストールはWindowsの場合はあっという間にRED5にしろ、Javaもインストールが終わります。
くれぐれもJavaのバージョンとRED5のバージョンは関係があるので合わせてください。

インストールが無事完了するとその時点ですでにサービスに追加されてRED5が起動するように
なっています。

それでは実際にデモを動かしてRED5の動作確認をしてみましょう。

[スタートメニュー]→[全てのプログラム]→[Red5]から“Welcome page“を選択します。

どうやら、インストールの際にサンプルビデオを3本ほどダウンロードするようになっているらしく、インストールするversionなのか環境毎にサンプルビデオは違うようです。私はちなみにトランスフォーマー、スターウォーズ、アイアンマンでした。

ここまでいけば取り合えずめでたし。インストールは完了です。

下記はブラウザー埋め込みFlash PlayerでのRTMP接続を行う際の記述サンプルです。

<script type='text/javascript' src='swfobject.js'></script> <div id='preview'>This div will be replaced</div> <script type='text/javascript'> var s1 = new SWFObject('player-viral.swf','ply','470','320','9','#ffffff'); s1.addParam('allowfullscreen','true'); s1.addParam('allowscriptaccess','always'); s1.addParam('wmode','opaque'); s1.addVariable('id','ply'); s1.addVariable('backcolor','3333FF'); s1.addVariable('lightcolor','00CC00'); s1.addVariable('screencolor','99FFFF'); s1.addVariable('icons','false'); s1.addVariable('dock','true'); s1.addVariable('displayclick','fullscreen'); s1.addVariable('file', 'IronMan.flv'); s1.addVariable('streamer', 'rtmp://www.linuxmagic.org/oflaDemo'); s1.addVariable('type', 'rtmp'); s1.write('preview'); </script>

擬似ストリーミング

Apache WEBサーバで擬似ストリーミング(Pseudo Progressive streaming)する場合の方法を紹介します。

まず最初にmod_flvxをダウンロードします。

コンパイル手順)

任意のフォルダへmod_flvx.cを置きます。そしてコンパイルします。
$ /usr/local/apache2/bin/apxs -i -a -c mod_flvx.c

コンパイルしたらApacheのmodulesディレクトリへコピーしてください。

Apache Webサーバの設定ファイルを編集します。
$ vi httpd.conf
以下の記述を必要箇所へ記述しセーブします。

LoadModule flvx_module  modules/mod_flvx.so

AddHandler flv-stream .flv


サーバを再起動します。
$service  httpd restart

これで、擬似ストリーミングする環境ができましたので、後はコンテンツを用意し任意のフォルダへ置くことでストリーミングの環境はOKです。作業としてはHTMLコンテンツへPlayerの埋込みを行うと作業完了です。

FLASH PLAYER

Flash PlayerはOS上で動作するものとWEB上で埋め込まれた形で再生するもので分かれます。

OSローカルで再生するもので代表的なものは以下のものがあります

※沢山検索エンジンで探索すると見つかります。

WEBブラウザ上で再生するもので代表的なものは以下のものがあります

  Flash Playerは本格的なRTMPストリーミングとHTTP疑似ストリーミング、HTTPストリーミングで分かれるため、サイト構築の際に用途に合わせた選択が必要と思います。
そのためには、ストリーミングを利用する同時ユーザ数、コンテンツの動画画質、動画タイトルの再生時間が関係してきます。

FlashVideo

[配信方式について]

まず最初にストリーミングの配信方法ですが、大きくは以降に述べる2種類の方法があります。見たいときにみるオンデマンド配信
と、リアルタイムで放送されるリアルタイムストリーミング(ライブ配信)がそれに相当します。

[Video on Demand]
サーバー上にある動画ファイルを必要に応じてその時に再生する方式が「オンデマンド」となります。
ユーザーは、いつでも好きな時にその動画へアクセスすることができ、常にいちばん先頭から再生することができるのが「オンデマンド」の特徴です。一時停止、早送り、巻戻しなども自由自在です。

Yahoo動画のGyaoとか、YouTube、ニコニコ動画は見たいときに最初から見る事ができますのでVideo on Demandになります。

[ライブ配信]
これはテレビ放送と同じで、その時間に生放送を視聴する方式がライブ配信になります。
ですから、例えば午後2時に放送する番組があったとします。遅れて再生スタートを押しても頭からではなく現在起きている映像がリアルタイムで再生されます。

多くの人が同時に視聴するため、多大なトラフィックが発生し通信コストが掛かるため、ホスティングプロバイダーでもストリーミングのアクセスが多い場合は、課金形態がかわる場合があるので要注意です。

そのため、 有料会員制を行う必要が生じてしまい、結果的にはサービスとしてはあまり普及していません。
見る側の特にはなりかもしれませんが、運営サイドとしては儲からないサービスなのかもしれませんね。

Archives By Month