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>
<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擴展之后的網頁播放器，代碼如下所示。
<!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點播的網頁播放器，代碼如下所示。
<!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的網頁播放器，代碼如下所示。
<!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點播的網頁播放器，代碼如下所示。
<!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的網頁播放器，代碼如下所示。
<!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的支持。代碼如下所示。
<!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>標簽的網頁播放器（實際上就是一張網頁）。源代碼如下所示。
<!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源代碼如下所示。
<!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）
————————————————
版權聲明：本文為CSDN博主「雷霄驊」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/leixiaohua1020/article/details/43936415