=====================================================
Flash流媒体文章列表:
最简单的基于Flash的流媒体示例:RTMP推送和接收(ActionScript)
最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)
=====================================================
本文继续上一篇文章,记录一些基于Flash的流媒体处理的例子。本文记录一些基于Flash技术的网页播放器。基于Flash的网页播放器相比于其他网页播放器来说最大的优势就是“免插件安装”了,这一点可以很大的提高用户的体验质量。早些时候网络视频(尤其是直播)一般都使用ActiveX控件作为视频播放器,而这些控件并不普及,所以终端用户必须下载相关的插件才能收看节目,因而对很多不熟悉电脑的用户造成了很大的障碍。直到Flash网页播放器的出现,这一障碍才得到了解决。本文将会记录几个常用的网页播放器,方便以后开发测试使用。
![](https://i-blog.csdnimg.cn/blog_migrate/ab4acaf7bd710462ff92956d556bdee1.png)
本文记录以下几种常用的网页播放器:
- rtmp_sample_player_adobe: 从Adobe Flash Media Sever提取出来的测试播放器
- rtmp_sample_player_wowza: 从Wowza服务器中提取出来的测试播放器
- rtmp_sample_player_flowplayer: 基于FlowPlayer的RTMP/HTTP播放器(添加RTMP plugin)
- rtmp_sample_player_videojs: 基于VideoJS的RTMP/HTTP播放器
- rtmp_sample_player_jwplayer: 基于JWplayer的RTMP/HTTP播放器
- hls_sample_player_flowplayer: 基于FlowPlayer的HLS播放器(添加HLS plugin)
- hls_video_player_html5: 基于HTML5的HLS/HTTP播放器
- activex_vlc_player: 基于VLC的ActiveX控件的播放器
RTMP Sample Player Adobe
![](https://i-blog.csdnimg.cn/blog_migrate/120359c84341315dde233de91258f7b2.png)
RTMP Sample Player Adobe的截图如下所示。
RTMP Sample Player Wowza
![](https://i-blog.csdnimg.cn/blog_migrate/18b63ee92f2a19e1f21f838a6a742d65.png)
RTMP Sample Player Wowza是从Wowza Streaming Engine中提取出来的测试播放器,平时测试使用也比较方便,将RTMP地址贴到对应的输入框中,单击“start”就可以播放流媒体了。
RTMP Sample Player Wowza的截图如下所示。
![](https://i-blog.csdnimg.cn/blog_migrate/cce27631d8a8857bdec0ba9ae8af2fb5.jpeg)
RTMP Sample Player Flowplayer
![](https://i-blog.csdnimg.cn/blog_migrate/262441e3dbc8843d9a64a8a3e3bdb869.jpeg)
注:FlowPlayer有两个版本:HTML5版本和Flash版本,本文中使用的是Flash版本。
RTMP Sample Player Flowplayer是基于FlowPlayer的网页播放器。其中包含两个播放器:
- Sample Player Flowplayer:HTTP点播网页播放器
- RTMP Sample Player Flowplayer:RTMP网页播放器
Sample Player Flowplayer是支持HTTP点播的网页播放器,代码如下所示。
<html><head><script type="text/javascript" src="flowplayer-3.2.8.min.js"></script><title>Sample Player FlowPlayer</title></head><body> <h1>Sample Player FlowPlayer</h1> <p>Lei Xiaohua<br/> <a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/> leixiaohua1020@126.com</p> <!-- this A tag is where your Flowplayer will be placed. it can be anywhere --> <a href="http://video-js.zencoder.com/oceans-clip.mp4" style="display:block;width:520px;height:330px" id="player"> </a> <!-- this will install flowplayer inside previous A- tag. --> <script> flowplayer("player", "flowplayer-3.2.8.swf"); </script> </body></html>
播放器的效果如下图所示,图中正在播放的视频文件的URL为http://video-js.zencoder.com/oceans-clip.mp4
![](https://i-blog.csdnimg.cn/blog_migrate/ffe630c64cfa04c4405d099f567469ee.jpeg)
RTMP Sample Player Flowplayer是经过RTMP Plugin扩展之后的网页播放器,代码如下所示。
<!DOCTYPE html><html><head><script type="text/javascript" src="flowplayer-3.2.8.min.js"></script><title>RTMP Sample Player FlowPlayer</title></head><body> <h1>RTMP Sample Player FlowPlayer</h1> <p>Lei Xiaohua<br/> <a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/> leixiaohua1020@126.com</p> <!-- this A tag is where your Flowplayer will be placed. it can be anywhere --> <