流媒体技术世界——分享技术，增值服务。Wowza Media System LLC,.中国大陆地区授权代理商，Intel MediaServerStudio 和 MediaSDK 中国大陆地区授权代理商 Flowplayer如何与Wowza Streaming Engine配合使用?

这篇文章介绍Flowplayer (http://flowplayer.org) 如何与Wowza Stream Engine 4^®配合使用。 www.ttstream.com

内容

准备工作
点播(VOD)的例子
直播的例子
nDVR的例子
如何播放位于[install-dir]/content 下子目录中的内容文件
使用SMIL实现直播码率自适应的例子
Flash 的安全限制

准备工作

下载并安装Wowza Media Server。
下载FlowPlayer Flash 并解开压缩包。
下载RTMP 流媒体插件.swf 将它拷贝到前面被解开的Flowplayer文件夹中. (请确定要将它拷贝到包含flowplayer-3.x.x.swf文件的flowplayer 文件夹下.)

点播(VOD)的例子

在这个例子中,应用vod将被用于提供VOD流媒体服务，内容位于[install-dir]/content 文件夹下。这个vod 应用在你安装Wowza Media Server后就已经被默认配置好了。

在Flowplayer解压缩后的目录下，编辑flowplayer/example/index.html文件。在<script> 部分做如下改动:

注意: 下面的版本号 "x.x" 要替换为你当前所使用的版本.

从:
Code:
```
<script>
	flowplayer("player", "../flowplayer-3.x.x.swf");
</script>
```
改变为:
Code:
```
<script type="text/javascript">
	flowplayer("player", "../flowplayer-3.x.x.swf",
		{
			clip: {
				url: 'mp4:sample.mp4',
				provider: 'rtmp'
			},
			plugins: {
				rtmp: {
				url: '../flowplayer.rtmp-3.x.x.swf',
				netConnectionUrl: 'rtmp://[wowza-ip-address]/vod'
				}
			}
		}
	);
</script>
```
其中:
- [wowza-ip-address] 运行Wowza Media Server的服务器IP地址.
- vod 是Wowza Media Server 上的应用名.
- mp4:sample.mp4是Wowza Media Server上自带的例子视频文件.
要播放时，将flowplayer 文件夹拷贝一个web服务器上，并在WEB浏览器上访问下面的URL:
Code:
```
http://[webserver-address]/flowplayer/example/index.html
```

直播的例子

配置一个名字为live的直播应用
在Flowplayer解压缩后的目录下，编辑flowplayer/example/index.html文件，对<script> 部分做如下的改动:

注意:将版本好 "x.x" 改变为你当前使用的版本.

注意:在clip部分要设置live: true,.

从:
Code:
```
<script>
	flowplayer("player", "../flowplayer-3.x.x.swf");
</script>
```
改变为:
Code:
```
<script type="text/javascript">
	flowplayer("player", "../flowplayer-3.x.x.swf",
		{
			clip: {
				url: 'myStream',
				live: true,
				provider: 'rtmp'
			},
			plugins: {
				rtmp: {
				url: '../flowplayer.rtmp-3.x.x.swf',
				netConnectionUrl: 'rtmp://[wowza-ip-address]/live'
				}
			}
		}
	);
</script>
```
其中:
- [wowza-ip-address] 是运行Wowza Media Server的服务器IP地址.
- live 是Wowza Media Server 上的应用名.
- myStream 是直播流的stream name.

如何播放位于[install-dir]/content 的子目录下的视频文件

要播放位于[install-dir]/content 的子目录下的H.264 或 MP3 内容,需要在子目录前加上mp4: 或 mp3: 的前缀。例如, 要播放下面的媒体文件:

Code:

[install-dir]/content/myvideos/sample.mp4

在flowplayer/example/index.html 中的播放脚本片段类似如下:

Code:

<script type="text/javascript">
	flowplayer("player", "../flowplayer-3.x.x.swf",
		{
			clip: {
				url: 'mp4:myvideos/sample.mp4',
				provider: 'rtmp'
			},
			plugins: {
				rtmp: {
				url: '../flowplayer.rtmp-3.x.x.swf',
				netConnectionUrl: 'rtmp://[wowza-ip-address]/vod'
				}
			}
		}
	);
</script>

用SMIL文件实现直播码率自适应的例子

这个部分介绍了一些更高级的直播流使用案例，在例子中使用了多个Flowplayer 插件，包括单个码率的RTMP流和通过SMIL文件实现的多码率自适应的RTMP流.

为了测试多码率自适应流媒体,一段覆盖在界面上的文子会提醒你切换到另外一个不同的码率上，例如: Switched to: mp4:Live1

根据基本安装指南按步骤进行.
下载 SMIL 插件的 .swf 文件并将它拷贝到FlowPlayer 文件夹下(在 flowplayer 文件夹下包含有 flowplayer-3.x.x.swf文件).
下载内容插件的 .swf 文件并将它拷贝到FlowPlayer 文件夹下(在 flowplayer 文件夹下包含有 flowplayer-3.x.x.swf文件).
下载带宽监测插件的 .swf 文件并将它拷贝到FlowPlayer 文件夹下(在 flowplayer 文件夹下包含有 flowplayer-3.x.x.swf文件).

创建一个SMIL文件，并将它拷贝到[install-dir]/content目录下.
在这里例子中，将使用一个名为live-smil.smil的SMIL文件

Code:

<smil>
    <head>
    </head>
    <body>
        <switch>
            <video src="live1" system-bitrate="700000"/>
            <video src="live2" system-bitrate="500000"/>
            <video src="live3" system-bitrate="350000"/>
        </switch>
    </body>
</smil>

编辑flowplayer/example/index.html 文件.
下面的播放器例子代码使用live-smil.smil文件来实现直播流的多码率自适应。用运行Wowza Media Server的服务IP地址替换下面的[wowza-ip-address].

Code:

	<html><head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<title>Flowplayer RTMP and SMIL setup</title>
	</head><body>
	
	<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>

	<a
	href="bbb_480x270" 

	style="display:block;width:480px;height:270px"
	id="smilbw"> 
	</a>
	
	<script language="JavaScript" type="text/javascript">
	
// To avoid sandbox violation the .swf has to be on your website not flowplayers. 
	flowplayer("smilbw", "flowplayer-3.2.7.swf", {  
	
	// The playlist is loaded from the RSS file
	clip: {
	url: "http://[wowza-ip-address]:1935/live/smil:live-smil.smil/medialist.smil ",

	autoPlay: false,
	provider: 'rtmp',
	
	// use smil and bwcheck when resolving the clip URL
	urlResolvers: [ 'smil', 'bwcheck' ]
	},
	
	plugins: {
	
	// the SMIL plugin reads in and parses the SMIL, and provides
	// the bitrates info to the bw detection plugin
	smil: {
	url: 'flowplayer.smil-3.2.2.swf'
	},
	
	// bandwidth check plugin
	bwcheck: { 
	url: 'flowplayer.bwcheck-3.2.5.swf', 
	
	// HDDN uses Wowza servers
	serverType: 'wowza',
	
	// we use dynamic switching, the appropriate bitrate is switched on the fly
	dynamic: true,
	
	netConnectionUrl: 'rtmp://[wowza-ip-address]/live',
	
	// show the selected file in the content box. This is not used in real installations.
	onStreamSwitchBegin: function (newItem, currentItem) {
	$f().getPlugin('content').setHtml("Will switch to: " + newItem.streamName + 
	" from " + currentItem.streamName);
	},
	onStreamSwitch: function (newItem) {
	$f().getPlugin('content').setHtml("Switched to: " + newItem.streamName);
	}
	},
	
	// RTMP streaming plugin
	rtmp: {
	url: 'flowplayer.rtmp-3.2.3.swf',
	netConnectionUrl: 'rtmp://[wowza-ip-address]/live'
	},
	
	// a content box so that we can see the selected bitrate. This is not normally
	// used in real installations.
	content: {
	url: 'flowplayer.content-3.2.0.swf',
	top: 0, left: 0, width: 400, height: 150,
	backgroundColor: 'transparent', backgroundGradient: 'none', border: 0,
	textDecoration: 'outline', 
	style: { 
	body: { 
	fontSize: 14,
	fontFamily: 'Arial', 
	textAlign: 'center', 
	color: '#ffffff' 
	} 
	} 
	} 
	} 
	
	});
	</script>
	
	</body></html>

将flowplayer 文件夹拷贝到一个Web服务器上，并用浏览器访问:
Code:
```
http://[webserver-address]/flowplayer/example/index.html
```

nDVR 播放

这个部分的配置展示了如何用Flowplayer播放Wowza的nDVR流媒体。这里是Wowza nDVR的基本的配置指南。请阅读Flowplayer 页面中的参考资料.

Code:

<html>
  <head>
    <script src="flowplayer-3.2.11.min.js"></script>
  </head>
  <body>
  	<h1>Flowplayer Wowza nDVR playback</h1>
    <div id="httpstreaming-dvr" style="display:block;width:425px;height:300px;"></div>
    <script>
		flowplayer("httpstreaming-dvr", "http://releases.flowplayer.org/swf/flowplayer-3.2.15.swf", {
   		plugins: {
        	f4m: {
           	 url: "http://releases.flowplayer.org/swf/flowplayer.f4m-3.2.9.swf",
           	 dvrBufferTime: 5,
           	 liveBufferTime: 5
        	},
       	 	httpstreaming: {
            	url: "http://releases.flowplayer.org/swf/flowplayer.httpstreaming-3.2.9.swf"
        	}
    	},
    	clip: {
      	  	url: "http://[wowza-address]:1935/dvr/Stream1/manifest.f4m?DVR",
       	 	urlResolvers: ['f4m'],
       	 	provider: 'httpstreaming',
        	autoPlay: false
    	}
	});
    </script>
  </body>
</html>

Flash 安全限制

由于Flash的安全限制, 你必须将Flowplayer文件部署在你的 web 服务器上。最简单的办法就是将flowplayer文件夹下的所有文件(包括子目录)拷贝到你的WEB服务器上。开始播放时,打开一个web浏览器访问index.html 文件.