logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

最简单的基于Flash的流媒体示例：网页播放器（HTTP，RTMP，HLS）

 清扬视频 2016-09-28

===============================================
Flash流媒体文章列表：

最简单的基于Flash的流媒体示例：RTMP推送和接收（ActionScript）

最简单的基于Flash的流媒体示例：网页播放器（HTTP，RTMP，HLS）

=====================================================


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



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

 
RTMP Sample Player Adobe是从Adobe Flash Media Sever提取出来的测试播放器，平时测试使用非常方便，把测试的RTMP地址粘贴到下方的“Stream URL”里面，单击右侧红色的“Play Stream”就可以播放流媒体了。
RTMP Sample Player Adobe的截图如下所示。

 


RTMP Sample Player Wowza

 

RTMP Sample Player Wowza是从Wowza Streaming Engine中提取出来的测试播放器，平时测试使用也比较方便，将RTMP地址贴到对应的输入框中，单击“start”就可以播放流媒体了。
RTMP Sample Player Wowza的截图如下所示。

RTMP Sample Player Flowplayer

 
FlowPlayer官网：http://flash./
注：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点播的网页播放器，代码如下所示。
  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.     leixiaohua1020@126.com</p>  
  15.       
  16.     <!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->  
  17.     <a    
  18.          href="http://video-js./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./oceans-clip.mp4


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

  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.     leixiaohua1020@126.com</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

RTMP Sample Player VideoJS


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

RTMP Sample Player VideoJS是基于Video.js的RTMP播放器。其中包含两个播放器：
  • Sample Player VideoJS：HTTP点播网页播放器
  • RTMP Sample Player VideoJS：RTMP网页播放器
Sample Player VideoJS是支持HTTP点播的网页播放器，代码如下所示。
  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.     leixiaohua1020@126.com</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./oceans-clip.png"  
  21.       data-setup="{}">  
  22.     <source src="http://video-js./oceans-clip.mp4" type='video/mp4' />  
  23.     <source src="http://video-js./oceans-clip.webm" type='video/webm' />  
  24.     <source src="http://video-js./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:///html5-video-support/" target="_blank">supports HTML5 video</a></p>  
  28.   </video>  
  29.   
  30.   
  31. </body>  
  32. </html>  

播放器的效果如下图所示，图中正在播放的视频的URL为http://video-js./oceans-clip.mp4
 

RTMP Sample Player VideoJS是支持RTMP的网页播放器，代码如下所示。
  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.     leixiaohua1020@126.com</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:///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
 


RTMP Sample Player JWPlayer

 

JW Player官网：http://www.

注：最新版的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点播的网页播放器，代码如下所示。
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www./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.     leixiaohua1020@126.com</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
 

RTMP Sample Player JWPlayer是支持RTMP的网页播放器，代码如下所示。
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www./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.     leixiaohua1020@126.com</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


HLS Sample Player Flowplayer

HLS Sample Player Flowplayer是增加了HLS Plugin扩展之后的FlowPlayer。增加了HLS Plugin之后，FlowPlayer增加了对HLS的支持。代码如下所示。
  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.     leixiaohua1020@126.com</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./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./drive.m3u8


HLS Video Player Html5

 
HTML5 Video标签参考：http://www.w3school.com.cn/html5/html5_video.asp
HLS Video Player Html5是使用了HTML5的<Video>标签的网页播放器（实际上就是一张网页）。源代码如下所示。
  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.     leixiaohua1020@126.com</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的话，打开网页会显示如下信息。
 
如果浏览器支持HTML5，打开网页的效果如下图所示。图中正在播放的视频的URL为sintel.mp4


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源代码如下所示。
  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.     leixiaohua1020@126.com</p>  
  12. <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"  
  13.     codebase="http://downloads./pub/videolan/vlc/latest/win32/axvlc.cab"  
  14.        width="640" height="480" id="vlc" events="True">  
  15.  <!--<param name="Src" value="http://video-js./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

下载


Simplest flashmedia example

SourceForge：https:///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）

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 清扬视频 > 《待分类》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多