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

时间:2022-12-25 23:37:45

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上查看代码片派生到我的代码片

<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

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

[html] view plain copy
在CODE上查看代码片派生到我的代码片

<!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 -->
<a
href="#"
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",{
clip: {
url: 'hks',
provider: 'rtmp',
live: true,
},
plugins: {
rtmp: {
url: 'flowplayer.rtmp-3.2.8.swf',
netConnectionUrl: 'rtmp://live.hkstv.hk.lxdns.com/live'
}
}
});
</script>

<p>
Sample RTMP URL (Live) is "rtmp://live.hkstv.hk.lxdns.com/live/hks"
</p>

</body>
</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上查看代码片派生到我的代码片

<!DOCTYPE html>
<html>
<head>
<title>Sample Player Videojs</title>
<!-- 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"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<h1>Sample Player Videojs</h1>
<p>Lei Xiaohua<br/>
<a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>
leixiaohua1020@126.com</p>
<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"></track>
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>
<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>
</video>

</body>
</html>

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

RTMP Sample Player VideoJS是支持RTMP的网页播放器,代码如下所示。
[html] view plain copy
在CODE上查看代码片派生到我的代码片

<!DOCTYPE html>
<html>
<head>
<title>RTMP Sample Player Videojs</title>
<!-- 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"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<h1>RTMP Sample Player Videojs</h1>
<p>Lei Xiaohua<br/>
<a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>
leixiaohua1020@126.com</p>
<video 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"/>

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

</body>
</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上查看代码片派生到我的代码片

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Player JWPlayer</title>
<script type='text/javascript' src='jwplayer.js'></script>
</head>
<body>
<h1>Sample Player JWPlayer</h1>
<p>Lei Xiaohua<br/>
<a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>
leixiaohua1020@126.com</p>

<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'player.swf',
'file': 'sintel.mp4',
'controlbar': 'bottom',
'width': '640',
'height': '360'
});
</script>

</body>
</html>

播放器的效果如下图所示,图中正在播放的视频的URL为本地的sintel.mp4

RTMP Sample Player JWPlayer是支持RTMP的网页播放器,代码如下所示。
[html] view plain copy
在CODE上查看代码片派生到我的代码片

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RTMP Sample Player JWPlayer</title>
<script type='text/javascript' src='jwplayer.js'></script>
</head>
<body>
<h1>RTMP Sample Player JWPlayer</h1>
<p>Lei Xiaohua<br/>
<a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>
leixiaohua1020@126.com</p>

<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'player.swf',
'file': 'flv',
'streamer': 'rtmp://wx.cnrmall.com/live',
'controlbar': 'bottom',
'width': '640',
'height': '360'
});
</script>
<p>
Sample RTMP URL (Live) is "rtmp://wx.cnrmall.com/live/flv"
</p>
</body>
</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上查看代码片派生到我的代码片

<!DOCTYPE HTML>
<html>
<head>
<title>HLS Sample Player Flowplayer</title>
<script type="text/javascript" src="flowplayer-3.2.12.min.js"></script>
<script type="text/javascript" src="flowplayer.ipad-3.2.12.min.js"></script>
</head>

<body>
<h1>HLS 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>
<!-- player container-->
<a style="display: block; width: 660px; height: 350px;" id="flashls_vod">
</a>

<!-- Flowplayer installation and configuration -->
<script type="text/javascript">
flowplayer("flashls_vod", "flowplayer.swf", {
// configure the required plugins
plugins: {
flashls: {
url: 'flashlsFlowPlayer.swf',
}
},
clip: {
url: "http://stream.flowplayer.org/drive.m3u8",
//url: "http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8",
//live: true,
urlResolvers: "flashls",
provider: "flashls"
}
}).ipad();
</script>
<p>

</p>

</body>
</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上查看代码片派生到我的代码片

<!DOCTYPE HTML>
<html>
<head>
<title>Video Player Html5</title>
</head>
<body>
<h1>Video Player Html5</h1>
<p>Lei Xiaohua<br/>
<a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>
leixiaohua1020@126.com</p>
<video src="sintel.mp4" controls="controls">
your browser does not support the video tag
</video>

</body>
</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上查看代码片派生到我的代码片

<!DOCTYPE HTML>
<html>
<head>
<title>ActiveX VLC Player</title>
</head>
<body>
<h1>ActiveX VLC Player</h1>
<p>Lei Xiaohua<br/>
<!-- To run this demo you should install VLC first -->
<a href="http://blog.csdn.net/leixiaohua1020">http://blog.csdn.net/leixiaohua1020</a><br/>
leixiaohua1020@126.com</p>
<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>

</body>
</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)

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

  1. 最简单的基于Flash的流媒体示例:RTMP推送和接收(ActionScript)

    ===================================================== Flash流媒体文章列表: 最简单的基于Flash的流媒体示例:RTMP推送和接收(Acti ...

  2. Android流媒体开发之路三&colon;基于NDK开发Android平台RTSP播放器

    基于NDK开发Android平台RTSP播放器 最近做了不少android端的开发,有推流.播放.直播.对讲等各种应用,做了RTMP.RTSP.HTTP-FLV.自定义等各种协议,还是有不少收获和心得 ...

  3. 全平台网页播放器兼容H5与Flash还带播放列表

    许久不发文了,2018年第一篇文章,写点干货--关于网页播放器的问题.嗯,实际上我是在52破解首发的,当做新人贴. 目前来说,网页播放器不少,随便找找都能找到一大堆,然而好用的就那么几个,比如ckpl ...

  4. EasyPlayer开源流媒体移动端播放器推出RTSP-RTMP-HTTP-HLS全功能Pro版

    EasyPlayerPro介绍 Android EasyPlayerPro专业版全功能播放器,是由EasyDarwin开源团队维护的一款支持RTSP.RTMP.HTTP.HLS多种流媒体协议的播放器版 ...

  5. 基于jQuery的视频和音频播放器jPlayer

    jPlayer见网络上资料很少,官方英文资料太坑爹TAT,于是就写一个手记给大家参考下.据我观察,jPlayer的原理主要是用到HTML5,在不支持HTML5的浏览器上使用SWF.做到全兼容,这一点很 ...

  6. EasyNVR H5直播流媒体解决方案前端构建之:如何播放自动适配RTMP&sol;HLS直播播放

    之前在进行EasyNVR多屏开发的时候,由于多屏功能不需要在手机端展示出来(pc多播放为RTMP,手机端播放为HLS),因此只注意到了引用videojs来进行rtmp的播放.由于不同项目需求不同,对h ...

  7. 基于Qt Phonon模块实现音乐播放器

    这次使用Qt实现的是一个本地音乐播放器,可以播放下载在计算机本地的音乐,提供了添加歌曲,歌曲列表,清空列表的功能.默认歌曲列表循环播放.音乐播放的实现主要依赖的是Qt 的多媒体框架phonon.该音乐 ...

  8. 一个基于H5audio标签的vue音乐播放器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. rtsp 流媒体服务器,播放器

    https://github.com/EasyDSS/EasyPlayer-RTSP-Android EasyPlayer EasyPlayer RTSP Android 播放器是由紫鲸团队开发和维护 ...

随机推荐

  1. Makefile 一点一滴(二)—— 输出文件到指定路径

    先来看最简单的 makefile 文件: TestCpp : TestCpp.o g++ -o TestCpp TestCpp.o TestCpp.o : TestCpp.cpp g++ -c Tes ...

  2. 思考方式--SMART原则

    如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭 万事开头于你目标的设定,如果开始走错了,那么后面的路将会更加的错误,甚至于更加的努力 ...

  3. u-boot 2011&period;09 调用kernel 的流程

    这段时候我总是觉得有个问题,u-boot 的存在是不是就是为了调用kernel 而存在的. 所以,粗浅的跟了一下这个流程,还有很多细节上的东西没有做好,往指正. u-boot-2011.9 调用内核代 ...

  4. Halcon标定步骤

    Halcon标定步骤 1.设置相机内部参数的初始值 StartCamPar := [0.016,0,0.0000074,0.0000074,326,247,652,494]set_calib_data ...

  5. Android 开发中 iBeacon的使用

    iBeacon的工作原理是基于Bluetooth Low Energy(BLE)低功耗蓝牙传输技术,iBeacon基站不断向四周发送蓝牙信号,当智能设备进入设定区域时,就能够收到信号.只要满足iBea ...

  6. diffuse linux 文件比对工具

    linux下比较好用的可视化文件比对工具

  7. 【男性身材计算】胸围&equals;身高&ast;0&period;48&lpar;如:身高175cm的标准胸围&equals;175cm&ast;0&period;61&equals;84cm&rpar;;腰围&equals;身高&ast;0&period;47&lpar;如:身高175c… - 李峥 - 价值中国网

    [男性身材计算]胸围=身高*0.48(如:身高175cm的标准胸围=175cm*0.61=84cm):腰围=身高*0.47(如:身高175c- - 李峥 - 价值中国网 李峥:[男性身材计算]胸围=身 ...

  8. (一)AngularJS获取贴纸Hello World

    一旦项目使用JQuery原创javascript,最近参加了一个项目,需要使用AngularJS.RequireJS比较框架,如汰渍. 这里写一些博客,记录自己的学习过程,虽然冠以原来的名字,资料,加 ...

  9. 05 Activity 跳转传值

    第一个Activity: package com.fmyboke; import java.io.Serializable; import java.util.ArrayList; import ja ...

  10. Linux - 用make进行工程编译

    首先建立好自己的工作目录 然后创建主函数main.cpp 接着写sinValue.h和cosValue.h函数文件 先按照传统方式进行编译运行 然后用make,先写makefile文件 将原来生成的文 ...