Flowplayer如何与Wowza Media Server配合使用?
转载请注明:文章来自www.wowza.cn
注意: 要访问最新的技术资料,请访问http://www.ttstream.com/wowza/
这篇文章介绍Flowplayer (http://flowplayer.org) 如何与Wowza Stream Engine 4®配合使用。www.wowza.cn


内容



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

准备工作


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


点播(VOD)的例子


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

  1. 在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上自带的例子视频文件.

  2. 要播放时,将flowplayer 文件夹拷贝一个web服务器上,并在WEB浏览器上访问下面的URL:
    Code:
    http://[webserver-address]/flowplayer/example/index.html

直播的例子


  1. 配置一个名字为live的直播应用
  2. 在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文件实现直播码率自适应的例子


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

为了测试多码率自适应流媒体,一段覆盖在界面上的文子会提醒你切换到另外一个不同的码率上,例如: Switched to: mp4:Live1
  1. 根据 基本安装指南按步骤进行.
  2. 下载 SMIL 插件的 .swf 文件 并将它拷贝到FlowPlayer 文件夹下(在 flowplayer 文件夹下包含有 flowplayer-3.x.x.swf文件).
  3. 下载 内容 插件的 .swf 文件 并将它拷贝到FlowPlayer 文件夹下(在 flowplayer 文件夹下包含有 flowplayer-3.x.x.swf文件).
  4. 下载 带宽监测插件的 .swf 文件 并将它拷贝到FlowPlayer 文件夹下(在 flowplayer 文件夹下包含有 flowplayer-3.x.x.swf文件).
  5. 创建一个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>
  6. 编辑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>
  7. 将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 文件.