这篇文章介绍Flowplayer (http://flowplayer.org) 如何与Wowza Stream Engine 4®配合使用。
www.ttstream.com
准备工作
点播(VOD)的例子
直播的例子
nDVR的例子
如何播放位于[install-dir]/content 下子目录中的内容文件
使用SMIL实现直播码率自适应的例子
Flash 的安全限制
在这个例子中,应用vod将被用于提供VOD流媒体服务,内容位于[install-dir]/content 文件夹下。这个vod 应用在你安装Wowza Media Server后就已经被默认配置好了。
要播放位于[install-dir]/content 的子目录下的H.264 或 MP3 内容,需要在子目录前加上mp4: 或 mp3: 的前缀。例如, 要播放下面的媒体文件:
在flowplayer/example/index.html 中的播放脚本片段类似如下:
这个部分介绍了一些更高级的直播流使用案例,在例子中使用了多个Flowplayer 插件,包括单个码率的RTMP流和通过SMIL文件实现的多码率自适应的RTMP流.
为了测试多码率自适应流媒体,一段覆盖在界面上的文子会提醒你切换到另外一个不同的码率上,例如: Switched to: mp4:Live1
这个部分的配置展示了如何用Flowplayer播放Wowza的nDVR流媒体。这里是Wowza nDVR的基本的配置指南。请阅读Flowplayer 页面中的参考资料.
由于Flash的安全限制, 你必须将Flowplayer文件部署在你的 web 服务器上。最简单的办法就是将flowplayer文件夹下的所有文件(包括子目录)拷贝到你的WEB服务器上。开始播放时,打开一个web浏览器访问index.html 文件.
内容
准备工作
点播(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
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 文件.