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

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

发布时间:2020-12-15 20:05:43 所属栏目:百科 来源:网络整理
导读:===================================================== Flash流媒体文章列表: 最简单的基于Flash的流媒体示例:RTMP推送和接收(ActionScript) 最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS) ========================================


=====================================================
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"></scripttitle>Sample?Player?FlowPlayer ??
    4. ??
    5. body>??????
    6. ????h1 ????p>Lei?Xiaohuabr/>??
    7. a?href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020a/>??
    8. ????leixiaohua1020@126.com ??????
    9. ????<!--?this?A?tag?is?where?your?Flowplayer?will?be?placed.?it?can?be?anywhere?-->??
    10. a????
    11. ?????????href="http://video-js.zencoder.com/oceans-clip.mp4"??
    12. ?????????style="display:block;width:520px;height:330px"????
    13. ?????????id="player">???
    14. >???
    15. <!--?this?will?install?flowplayer?inside?previous?A-?tag.?-->??
    16. ????flowplayer("player",?"flowplayer-3.2.8.swf");??
    17. ??????
    18. >??

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



    RTMP Sample Player Flowplayer是经过RTMP Plugin扩展之后的网页播放器,代码如下所示。
    copy
    ? <!DOCTYPE?html>RTMP?Sample?Player?FlowPlayer>??????
  • ????leixiaohua1020@126.com ????<!--?this?A?tag?is?where?your?Flowplayer?will?be?placed.?it?can?be?anywhere?-->??
  • a????
  • ?????????href="#"??
  • ?????????style="display:block;width:520px;height:330px"????
  • ?????????id="player"<!--?this?will?install?flowplayer?inside?previous?A-?tag.?-->??
  • ????flowplayer("player",?"flowplayer-3.2.8.swf",{???
  • ????????clip:?{???
  • ??????????url:?'hks',??
  • ??????????provider:?'rtmp',??
  • ??????????live:?true,???
  • ????????},????
  • ????????plugins:?{????
  • ???????????rtmp:?{????
  • ?????????????url:?'flowplayer.rtmp-3.2.8.swf',????
  • ?????????????netConnectionUrl:?'rtmp://live.hkstv.hk.lxdns.com/live'??
  • ???????????}???
  • ???????}???
  • ????});??
  • >?????????
  • ????????Sample?RTMP?URL?(Live)?is?"rtmp://live.hkstv.hk.lxdns.com/live/hks"??
  • 播放器的效果如下图所示,图中正在播放的视频的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点播的网页播放器,代码如下所示。
    copy
    ? ??>Sample?Player?Videojs ??<!--?Chang?URLs?to?wherever?Video.js?files?will?be?hosted?-->??
  • link?href="video-js.css"?rel="stylesheet"?type="text/css"<!--?video.js?must?be?in?the?<head>?for?older?IEs?to?work.?-->??
  • script?src="video.js"<!--?Unless?using?the?CDN?hosted?version,?update?the?URL?to?the?Flash?SWF?-->??
  • ????videojs.options.flash.swf?=?"video-js.swf";??
  • ??video?id="example_video_1"?class="video-js?vjs-default-skin"?controls?preload="none"?width="640"?height="264"??
  • ??????poster="http://video-js.zencoder.com/oceans-clip.png"??
  • ??????data-setup="{}"source?src="http://video-js.zencoder.com/oceans-clip.mp4"?type='video/mp4'?source?src="http://video-js.zencoder.com/oceans-clip.webm"?type='video/webm'?source?src="http://video-js.zencoder.com/oceans-clip.ogv"?type='video/ogg'?track?kind="captions"?src="demo.captions.vtt"?srclang="en"?label="English"tracktrack?kind="subtitles"?src="demo.captions.vtt"?srclang="en"?label="English"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?videovideo播放器的效果如下图所示,图中正在播放的视频的URL为http://video-js.zencoder.com/oceans-clip.mp4
    ?


    RTMP Sample Player VideoJS是支持RTMP的网页播放器,代码如下所示。

    copy
    ? >RTMP?Sample?Player?Videojsvideo?id="example_video_1"?class="video-js?vjs-default-skin"?controls?preload="none"?width="640"?height="480"?data-setup="{}"source?src="rtmp://ams.studytv.cn/livepkgr/264"?type="rtmp/flv"播放器的效果如下图所示,图中正在播放的视频的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点播的网页播放器,代码如下所示。
    copy
    ? html?xmlns="http://www.w3.org/1999/xhtml">Sample?Player?JWPlayerscript?type='text/javascript'?src='jwplayer.js'div?id='mediaspace'>This?text?will?be?replaceddivscript?type='text/javascript' ??????jwplayer('mediaspace').setup({??
  • ????????'flashplayer':?'player.swf',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????'file':?'sintel.mp4',248)"> ????????'controlbar':?'bottom',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????'width':?'640',248)"> ????????'height':?'360'??
  • ??????});??
  • 播放器的效果如下图所示,图中正在播放的视频的URL为本地的sintel.mp4


    RTMP Sample Player JWPlayer是支持RTMP的网页播放器,代码如下所示。
    copy
    ? >RTMP?Sample?Player?JWPlayer ????????'file':?'flv',248)"> ????????'streamer':?'rtmp://wx.cnrmall.com/live',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????'controlbar':?'bottom',248)"> ????????'width':?'640',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????'height':?'360'??
  • ??????});??
  • >?????????
  • ????????Sample?RTMP?URL?(Live)?is?"rtmp://wx.cnrmall.com/live/flv"??
  • 播放器的效果如下图所示,图中正在播放的视频的URL为rtmp://wx.cnrmall.com/live/flv



    HLS Sample Player Flowplayer

    HLS Sample Player Flowplayer是增加了HLS Plugin扩展之后的FlowPlayer。增加了HLS Plugin之后,FlowPlayer增加了对HLS的支持。代码如下所示。
    copy
    ? <!DOCTYPE?HTML>HLS?Sample?Player?Flowplayerscript?type="text/javascript"?src="flowplayer-3.2.12.min.js"script?type="text/javascript"?src="flowplayer.ipad-3.2.12.min.js" <!--?player?container-->??
  • a?style="display:?block;?width:?660px;?height:?350px;"?id="flashls_vod" <!--?Flowplayer?installation?and?configuration?-->??
  • script?type="text/javascript" flowplayer("flashls_vod",?"flowplayer.swf",?{??
  • ????//?configure?the?required?plugins??
  • ????plugins:?{??
  • ????????flashls:?{??
  • ????????????url:?'flashlsFlowPlayer.swf',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????}??
  • ????},108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????clip:?{??
  • ????????url:?"http://stream.flowplayer.org/drive.m3u8",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????//url:?"http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8",248)"> ????????//live:?true,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ????????urlResolvers:?"flashls",248)"> ????????provider:?"flashls"??
  • ????}??
  • }).ipad();??
  • 播放器的效果如下图所示,图中正在播放的视频的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>标签的网页播放器(实际上就是一张网页)。源代码如下所示。
    copy
    ? >Video?Player?Html5video?src="sintel.mp4"?controls="controls" your?browser?does?not?support?the?video?tag??
  • 在这里需要注意,<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源代码如下所示。
    copy
    ? >ActiveX?VLC?Player<!--?To?run?this?demo?you?should?install?VLC?first?-->??
  • OBJECT?classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"??
  • ????codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"??
  • ???????width="640"?height="480"?id="vlc"?events="True" ?<!--<param?name="Src"?value="http://video-js.zencoder.com/oceans-clip.mp4"?/>-->??
  • ?<!--<param?name="Src"?value="http://live.3gv.ifeng.com/live/CCTV13.m3u8"?/>-->??
  • <!--<param?name="Src"?value="rtmp://live.hkstv.hk.lxdns.com/live/hks"?/>-->??
  • <!--<param?name="Src"?value="mmst://media.shtv.net.cn/shtv"?/>-->??
  • ?param?name="Src"?value="rtsp://58.248.254.7:9135/live/ds-mmzh.sdp"? ???
  • param?name="ShowDisplay"?value="True"? ?param?name="AutoLoop"?value="False"?param?name="AutoPlay"?value="True"?OBJECT播放器的效果如下图所示,图中正在播放的视频的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)

    (编辑:李大同)

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

    • 推荐文章
        热点阅读