加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-15 20:10:21 所属栏目：百科 来源：网络整理
导读：http://blog.csdn.net/leixiaohua1020/article/details/43936415 ===================================================== Flash流媒体文章列表： 最简单的基于Flash的流媒体示例：RTMP推送和接收（ActionScript） 最简单的基于Flash的流媒体示例：网页播放

http://blog.csdn.net/leixiaohua1020/article/details/43936415

=====================================================
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.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

在CODE上查看代码片

派生到我的代码片

  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.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



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

[html] view plain copy

在CODE上查看代码片

派生到我的代码片

  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.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

在CODE上查看代码片

派生到我的代码片

  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.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
?


RTMP Sample Player VideoJS是支持RTMP的网页播放器，代码如下所示。
[html] view plain copy

在CODE上查看代码片

派生到我的代码片

  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://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

?


RTMP Sample Player JWPlayer

?

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

在CODE上查看代码片

派生到我的代码片

  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. ????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的网页播放器，代码如下所示。
[html] view plain copy

在CODE上查看代码片

派生到我的代码片

  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. ????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的支持。代码如下所示。
[html] view plain copy

在CODE上查看代码片

派生到我的代码片

  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.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



HLS Video Player Html5

?
HTML5 Video标签参考：http://www.w3school.com.cn/html5/html5_video.asp
HLS Video Player Html5是使用了HTML5的<Video>标签的网页播放器（实际上就是一张网页）。源代码如下所示。
[html] view plain copy

在CODE上查看代码片

派生到我的代码片

  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源代码如下所示。
[html] view plain copy

在CODE上查看代码片

派生到我的代码片

  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.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


下载


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）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同