最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)

本文继续上一篇文章,记录一些基于Flash的流媒体处理的例子。本文记录一些基于Flash技术的网页播放器。基于Flash的网页播放器相比于其他网页播放器来说最大的优势就是“免插件安装”了,这一点可以很大的提高用户的体验质量。早些时候网络视频(尤其是直播)一般都使用ActiveX控件作为视频播放器,而这些控件并不普及,所以终端用户必须下载相关的插件才能收看节目,因而对很多不熟悉电脑的用户造成了很大的障碍。直到Flash网页播放器的出现,这一障碍才得到了解决。本文将会记录几个常用的网页播放器,方便以后开发测试使用。
最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第1张图片

本文记录以下几种常用的网页播放器:
  • 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

  最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第2张图片
RTMP Sample Player Adobe是从Adobe Flash Media Sever提取出来的测试播放器,平时测试使用非常方便,把测试的RTMP地址粘贴到下方的“Stream URL”里面,单击右侧红色的“Play Stream”就可以播放流媒体了。
RTMP Sample Player Adobe的截图如下所示。

最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第3张图片 


RTMP Sample Player Wowza

 

RTMP Sample Player Wowza是从Wowza Streaming Engine中提取出来的测试播放器,平时测试使用也比较方便,将RTMP地址贴到对应的输入框中,单击“start”就可以播放流媒体了。
RTMP Sample Player Wowza的截图如下所示。
最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第4张图片

RTMP Sample Player Flowplayer

  最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第5张图片
FlowPlayer官网: http://flash.flowplayer.org/
注:FlowPlayer有两个版本:HTML5版本和Flash版本,本文中使用的是Flash版本。

RTMP Sample Player Flowplayer是基于FlowPlayer的网页播放器。其中包含两个播放器:
  • Sample Player Flowplayer:HTTP点播网页播放器
  • RTMP Sample Player Flowplayer:RTMP网页播放器
FlowPlayer原生支持HTTP点播,通过RTMP Plugin扩展之后支持RTMP。

Sample Player Flowplayer是支持HTTP点播的网页播放器,代码如下所示。
[html]  view plain copy
  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="flowplayer-3.2.8.min.js"></script>  
  4. <title>Sample Player FlowPlayer</title>  
  5. </head>  
  6.   
  7.   
  8. <body>      
  9.     <h1>Sample Player FlowPlayer</h1>  
  10.   
  11.   
  12.     <p>Lei Xiaohua<br/>  
  13.     <a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>  
  14.     [email protected]</p>  
  15.       
  16.     <!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->  
  17.     <a    
  18.          href="http://video-js.zencoder.com/oceans-clip.mp4"  
  19.          style="display:block;width:520px;height:330px"    
  20.          id="player">   
  21.     </a>   
  22.     <!-- this will install flowplayer inside previous A- tag. -->  
  23.     <script>  
  24.     flowplayer("player", "flowplayer-3.2.8.swf");  
  25.     </script>  
  26.       
  27. </body>  
  28. </html>  

播放器的效果如下图所示,图中正在播放的视频文件的URL为http://video-js.zencoder.com/oceans-clip.mp4
最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第6张图片

RTMP Sample Player Flowplayer是经过RTMP Plugin扩展之后的网页播放器,代码如下所示。

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script type="text/javascript" src="flowplayer-3.2.8.min.js"></script>  
  5. <title>RTMP Sample Player FlowPlayer</title>  
  6. </head>  
  7.   
  8.   
  9. <body>      
  10.     <h1>RTMP Sample Player FlowPlayer</h1>  
  11.   
  12.   
  13.     <p>Lei Xiaohua<br/>  
  14.     <a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>  
  15.     [email protected]</p>  
  16.       
  17.     <!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->  
  18.     <a    
  19.          href="#"  
  20.          style="display:block;width:520px;height:330px"    
  21.          id="player">   
  22.     </a>   
  23.     <!-- this will install flowplayer inside previous A- tag. -->  
  24.     <script>  
  25.     flowplayer("player", "flowplayer-3.2.8.swf",{   
  26.         clip: {   
  27.           url: 'hks',  
  28.           provider: 'rtmp',  
  29.           live: true,   
  30.         },    
  31.         plugins: {    
  32.            rtmp: {    
  33.              url: 'flowplayer.rtmp-3.2.8.swf',    
  34.              netConnectionUrl: 'rtmp://live.hkstv.hk.lxdns.com/live'  
  35.            }   
  36.        }   
  37.     });  
  38.     </script>  
  39.   
  40.   
  41.     <p>         
  42.         Sample RTMP URL (Live) is "rtmp://live.hkstv.hk.lxdns.com/live/hks"  
  43.     </p>  
  44.       
  45. </body>  
  46. </html>  

播放器的效果如下图所示,图中正在播放的视频的URL为rtmp://live.hkstv.hk.lxdns.com/live/hks
最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第7张图片

RTMP Sample Player VideoJS


Video.js官网: http://www.videojs.com/
注:Video.js是一个基于JavaScript的HTML5视频播放器,本身是开源的。

RTMP Sample Player VideoJS是基于Video.js的RTMP播放器。其中包含两个播放器:
  • Sample Player VideoJS:HTTP点播网页播放器
  • RTMP Sample Player VideoJS:RTMP网页播放器
Sample Player VideoJS是支持HTTP点播的网页播放器,代码如下所示。
[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>Sample Player Videojs</title>  
  5.   <!-- Chang URLs to wherever Video.js files will be hosted -->  
  6.   <link href="video-js.css" rel="stylesheet" type="text/css">  
  7.   <!-- video.js must be in the <head> for older IEs to work. -->  
  8.   <script src="video.js"></script>  
  9.   <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->  
  10.   <script>  
  11.     videojs.options.flash.swf = "video-js.swf";  
  12.   </script>  
  13. </head>  
  14. <body>  
  15. <h1>Sample Player Videojs</h1>  
  16. <p>Lei Xiaohua<br/>  
  17.     <a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>  
  18.     [email protected]</p>  
  19.   <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"  
  20.       poster="http://video-js.zencoder.com/oceans-clip.png"  
  21.       data-setup="{}">  
  22.     <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />  
  23.     <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />  
  24.     <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />  
  25.     <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>  
  26.     <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>  
  27.     <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>  
  28.   </video>  
  29.   
  30.   
  31. </body>  
  32. </html>  

播放器的效果如下图所示,图中正在播放的视频的URL为http://video-js.zencoder.com/oceans-clip.mp4
  最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第8张图片

RTMP Sample Player VideoJS是支持RTMP的网页播放器,代码如下所示。
[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>RTMP Sample Player Videojs</title>  
  5.   <!-- Chang URLs to wherever Video.js files will be hosted -->  
  6.   <link href="video-js.css" rel="stylesheet" type="text/css">  
  7.   <!-- video.js must be in the <head> for older IEs to work. -->  
  8.   <script src="video.js"></script>  
  9.   <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->  
  10.   <script>  
  11.     videojs.options.flash.swf = "video-js.swf";  
  12.   </script>  
  13. </head>  
  14. <body>  
  15. <h1>RTMP Sample Player Videojs</h1>  
  16. <p>Lei Xiaohua<br/>  
  17.     <a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>  
  18.     [email protected]</p>  
  19.   <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="480" data-setup="{}">  
  20.     <source src="rtmp://ams.studytv.cn/livepkgr/264" type="rtmp/flv"/>  
  21.       
  22.     <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>  
  23.   </video>  
  24.   
  25.   
  26. </body>  
  27. </html>  

播放器的效果如下图所示,图中正在播放的视频的URL为rtmp://ams.studytv.cn/livepkgr/264
最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第9张图片
 


RTMP Sample Player JWPlayer

  最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第10张图片

JW Player官网:http://www.jwplayer.com

注:最新版的JW Player似乎不能免费使用RTMP播放功能了,这里使用的是旧版的JW Player


RTMP Sample Player JWPlayer是基于JW Player的RTMP播放器。其中包含两个播放器:
  • Sample Player JWPlayer:HTTP点播网页播放器
  • RTMP Sample Player JWPlayer:RTMP网页播放器
Sample Player JWPlayer是支持HTTP点播的网页播放器,代码如下所示。
[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Sample Player JWPlayer</title>  
  5.     <script type='text/javascript' src='jwplayer.js'></script>  
  6. </head>  
  7. <body>  
  8.     <h1>Sample Player JWPlayer</h1>  
  9.     <p>Lei Xiaohua<br/>  
  10.     <a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>  
  11.     [email protected]</p>  
  12.       
  13.     <div id='mediaspace'>This text will be replaced</div>  
  14.     <script type='text/javascript'>  
  15.       jwplayer('mediaspace').setup({  
  16.         'flashplayer': 'player.swf',  
  17.         'file': 'sintel.mp4',  
  18.         'controlbar': 'bottom',  
  19.         'width': '640',  
  20.         'height': '360'  
  21.       });  
  22.     </script>  
  23.       
  24. </body>  
  25. </html>  

播放器的效果如下图所示,图中正在播放的视频的URL为本地的sintel.mp4
 
最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第11张图片

RTMP Sample Player JWPlayer是支持RTMP的网页播放器,代码如下所示。
[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>RTMP Sample Player JWPlayer</title>  
  5.     <script type='text/javascript' src='jwplayer.js'></script>  
  6. </head>  
  7. <body>  
  8.     <h1>RTMP Sample Player JWPlayer</h1>  
  9.     <p>Lei Xiaohua<br/>  
  10.     <a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>  
  11.     [email protected]</p>  
  12.       
  13.     <div id='mediaspace'>This text will be replaced</div>  
  14.     <script type='text/javascript'>  
  15.       jwplayer('mediaspace').setup({  
  16.         'flashplayer': 'player.swf',  
  17.         'file': 'flv',  
  18.         'streamer': 'rtmp://wx.cnrmall.com/live',  
  19.         'controlbar': 'bottom',  
  20.         'width': '640',  
  21.         'height': '360'  
  22.       });  
  23.     </script>  
  24.     <p>         
  25.         Sample RTMP URL (Live) is "rtmp://wx.cnrmall.com/live/flv"  
  26.     </p>  
  27. </body>  
  28. </html>  

播放器的效果如下图所示,图中正在播放的视频的URL为rtmp://wx.cnrmall.com/live/flv
最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第12张图片

HLS Sample Player Flowplayer

HLS Sample Player Flowplayer是增加了HLS Plugin扩展之后的FlowPlayer。增加了HLS Plugin之后,FlowPlayer增加了对HLS的支持。代码如下所示。
[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <title>HLS Sample Player Flowplayer</title>  
  5. <script type="text/javascript" src="flowplayer-3.2.12.min.js"></script>  
  6. <script type="text/javascript" src="flowplayer.ipad-3.2.12.min.js"></script>  
  7. </head>  
  8.   
  9.   
  10. <body>  
  11. <h1>HLS Sample Player Flowplayer</h1>  
  12. <p>Lei Xiaohua<br/>  
  13.     <a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>  
  14.     [email protected]</p>  
  15. <!-- player container-->  
  16. <a style="display: block; width: 660px; height: 350px;" id="flashls_vod">  
  17. </a>  
  18.   
  19.   
  20. <!-- Flowplayer installation and configuration -->  
  21. <script type="text/javascript">  
  22. flowplayer("flashls_vod", "flowplayer.swf", {  
  23.     // configure the required plugins  
  24.     plugins: {  
  25.         flashls: {  
  26.             url: 'flashlsFlowPlayer.swf',  
  27.         }  
  28.     },  
  29.     clip: {  
  30.         url: "http://stream.flowplayer.org/drive.m3u8",  
  31.         //url: "http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8",  
  32.         //live: true,  
  33.         urlResolvers: "flashls",  
  34.         provider: "flashls"  
  35.     }  
  36. }).ipad();  
  37. </script>  
  38. <p>  
  39.   
  40.   
  41. </p>  
  42.   
  43.   
  44. </body>  
  45. </html>  

播放器的效果如下图所示,图中正在播放的视频的URL为http://stream.flowplayer.org/drive.m3u8
最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第13张图片

HLS Video Player Html5

最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第14张图片 
HTML5 Video标签参考:http://www.w3school.com.cn/html5/html5_video.asp
HLS Video Player Html5是使用了HTML5的<Video>标签的网页播放器(实际上就是一张网页)。源代码如下所示。
[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <title>Video Player Html5</title>  
  5. </head>  
  6. <body>  
  7. <h1>Video Player Html5</h1>  
  8. <p>Lei Xiaohua<br/>  
  9.     <a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>  
  10.     [email protected]</p>  
  11. <video src="sintel.mp4" controls="controls">  
  12. your browser does not support the video tag  
  13. </video>  
  14.   
  15.   
  16. </body>  
  17. </html>  

在这里需要注意,<video>标签需要浏览器支持HTML。如果浏览器不支持HTML5的话,打开网页会显示如下信息。
  最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第15张图片
如果浏览器支持HTML5,打开网页的效果如下图所示。图中正在播放的视频的URL为sintel.mp4
最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第16张图片

ActiveX VLC Player


ActiveX VLC Player与上述的网页播放器有很大的不同,主要用于对比。ActiveX VLC Player是基于ActiveX控件的播放器。基于ActiveX控件意味着只有IE支持该网页播放器,而且要求本机必须首先安装VLC。
由于有几乎“万能”的VLC Media Player做后盾,该网页播放器的性能是相当强的:不仅支持上文中提到的各种播放器支持的HTTP、RTMP、HLS,而且支持MMS、RTSP以及UDP这些协议(VLC Media Player支持的协议它都支持)。
ActiveX VLC Player源代码如下所示。
[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <title>ActiveX VLC Player</title>  
  5. </head>  
  6. <body>  
  7. <h1>ActiveX VLC Player</h1>  
  8. <p>Lei Xiaohua<br/>  
  9. <!-- To run this demo you should install VLC first -->  
  10.     <a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>  
  11.     [email protected]</p>  
  12. <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"  
  13.     codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"  
  14.        width="640" height="480" id="vlc" events="True">  
  15.  <!--<param name="Src" value="http://video-js.zencoder.com/oceans-clip.mp4" />-->  
  16.  <!--<param name="Src" value="http://live.3gv.ifeng.com/live/CCTV13.m3u8" />-->  
  17.  <!--<param name="Src" value="rtmp://live.hkstv.hk.lxdns.com/live/hks" />-->  
  18.  <!--<param name="Src" value="mmst://media.shtv.net.cn/shtv" />-->  
  19.  <param name="Src" value="rtsp://58.248.254.7:9135/live/ds-mmzh.sdp" />  
  20.    
  21.  <param name="ShowDisplay" value="True" />  
  22.  <param name="AutoLoop" value="False" />  
  23.  <param name="AutoPlay" value="True" />  
  24.  </OBJECT>  
  25.   
  26.   
  27. </body>  
  28. </html>  

播放器的效果如下图所示,图中正在播放的视频的URL为rtsp://58.248.254.7:9135/live/ds-mmzh.sdp
最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)_第17张图片

下载


Simplest flashmedia example

SourceForge: https://sourceforge.net/projects/simplestflashmediaexample/
Github: https://github.com/leixiaohua1020/simplest_flashmedia_example
开源中国: http://git.oschina.net/leixiaohua1020/simplest_flashmedia_example

CSDN下载:http://download.csdn.net/detail/leixiaohua1020/8456499


本工程包含如下基于Flash技术的流媒体的例子:
simplest_as3_rtmp_player:  最简单的RTMP播放器(基于ActionScript)
simplest_as3_rtmp_streamer:最简单的RTMP推流器(基于ActionScript)
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控件的播放器


注意:某些播放器直接打开html页面是不能工作的,需要把播放器放到Web服务器上。
(例如Apache或者Nginx)

你可能感兴趣的:(最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS))