第二章

〜Player〜

FlowPlayerの入手

FlowPlayer+RED5

FlowPlayerの補足

FlowPlayer+RED5

FlowPlayerとRED5を使って、動画を配信する設定を組みます。

まず前回DLした、flowplayer.rtmp-3.2.3.zipを解凍します。

フォルダの中にあるflowplayer.rtmp-3.2.3.swfをコピーし、
flowplayerの中に張り付けます。そうすると以下のような状態になると思います

新しく、[flowplayer.html]というファイルを作ります。

ソースは以下をコピーしてお使いください。

<html> 

<head> 

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script> 

<link rel="stylesheet" type="text/css" href="style.css"> 

<title>Flowplayer+RED5</title> 

</head> 

<body> 

<a style="display:block;width:500px;height:300px" id="rtmp_player" > 

</a> 

<script> 

flowplayer("rtmp_player","flowplayer-3.2.7.swf",{

	clip:{

		url:'test',

		autoPlay:false,

		autoBuffering: true,

		bufferLength:6,

		provider: 'rtmp'

	},

	plugins:{

		rtmp:{

			url: 'flowplayer.rtmp-3.2.3.swf',

			netConnectionUrl: 'rtmp://192.168.0.250/oflaDemo'

		},

		controls: {

			play:true,

			stop:true,

			volume:true,

			mute:true,

			time:true,

			fullscreen:true,

			bufferColor: '#CCCCCC',

			volumeSliderColor: '#000000'

		}

	}

}

); 

</script> 

</body> 

</html>

太い赤字の部分は自分の環境に合わせてお使いください
[test]は動画の名前を表しています。拡張子が[flv]の時は省略可能です。
[rtmp://192.168.0.250/oflaDemo]はRED5のデモの時にconnectしたアドレスに書き換えてください

flowplayer.htmlをダブルクリックし、以下のような再生画面が表示されれば成功です。

あとは、再生ボタンを押せば動画が再生されます。

☆外部公開
今まで設定した以下のファイルをwebサーバーにUPしてください。

flowplayer-3.2.6.min.js
flowplayer-3.2.7.swf
flowplayer.rtmp-3.2.3.swf
flowplayer.controls-3.2.5.swf
flowplayer.html

自宅サーバーの場合は、アクセス可能な場所に置くだけで構いません。

外部に公開する、Port番号は、デフォルトなら

1935:TCP:サーバーアドレス

のみです。

RED5に付属している、Tomcatで公開する人は、5080も公開しなければなりません。

最後に、flowplayer.htmlの
[rtmp://ローカルIPアドレス/oflaDemo]⇒[rtmp://グローバルIPアドレス/oflaDemo]
に変更しなければなりません。

Pandorabox62's Windows XP HomeServer This Online

第二章

FlowPlayer+RED5