Home > Developer > Web Develop

Simplest flash-based streaming media example: Web Player (HTTP,RTMP,HLS)

Source: Internet
Author: User
Tags wowza wowza server
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞


This article continues the previous article, documenting some examples of flash-based streaming media processing. This article records some of the web player based on flash technology. The biggest advantage of Flash-based web player compared to other Web players is "plug-in Installation", which can greatly improve the quality of user experience. Earlier online video (especially live streaming) used ActiveX controls as video players, which were not popular, so end users had to download the relevant plug-ins to watch the program, thus creating a big hurdle for many users who were unfamiliar with the computer. This obstacle was resolved until the advent of the Flash Web Player. This article will record several commonly used Web player, convenient for later development test use.


This article records the following several commonly used Web players:
    • Rtmp_sample_player_adobe: Test player extracted from Adobe Flash Media sever
    • Rtmp_sample_player_wowza: Test player extracted from the Wowza server
    • Rtmp_sample_player_flowplayer: FlowPlayer-based rtmp/http player (add rtmp plugin)
    • RTMP_SAMPLE_PLAYER_VIDEOJS: Videojs-based rtmp/http player
    • Rtmp_sample_player_jwplayer: Jwplayer-based rtmp/http player
    • Hls_sample_player_flowplayer: FlowPlayer-based HLS player (add HLS plugin)
    • HLS_VIDEO_PLAYER_HTML5: HTML5-based hls/http player
    • Activex_vlc_player: The player for the VLC-based ActiveX control


rtmp sample player Adobe rtmp sample player Adobe is a Test player extracted from Adobe Flash Media Sever, which is handy for testing and pasting the test RTMP address into the "Stream U" below RL ", click on the red" play stream "on the right to play streaming media.
RTMP sample Player Adobe is shown below.







RTMP Sample Player Wowza
rtmp Sample player Wowza is a Test player extracted from Wowza streaming engine, which is easy to test and use, and the rtmp address is pasted into the corresponding input box, and clicking "Start" will allow you to play streaming media.
RTMP Sample Player Wowza is shown below.

RTMP Sample Player flowplayer FlowPlayer official website: http://flash.flowplayer.org/
Note: The FlowPlayer has two versions: the HTML5 version and the Flash version, and the Flash version is used in this article.

RTMP Sample player FlowPlayer is a flowplayer-based web player. It contains two players:
    • Sample player Flowplayer:http on-demand web player
    • RTMP Sample player flowplayer:rtmp web Player
FlowPlayer Native supports HTTP on-demand and supports rtmp after the rtmp plugin extension.

Sample player FlowPlayer is a web player that supports HTTP on-demand, as shown in the code below

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

[email protected]</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>




The effect of the player is shown in. The URL of the video file being played in the figure is http://video-js.zencoder.com/oceans-clip.mp4
RTMP sample player flowplayer is a web player extended by RTMP plugin. The code is as follows.
<!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/>
[email protected]</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>
The effect of the player is shown in. The URL of the video in the figure is rtmp://live.hkstv.hk.lxdns.com/live/hks
RTMP Sample Player VideoJS
Video.js official website: http://www.videojs.com/
Note: video.js is a javascript based HTML5 video player, which is open source.
RTMP sample player videojs is an RTMP player based on video.js. There are two players:
Sample player videojs: http on demand web player
RTMP sample player videojs: RTMP web player
Sample player videojs is a web player that supports HTTP on demand. The code is as follows.
<!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/>
[email protected]</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>
The effect of the player is as shown in the figure. The URL of the video being played in the figure is http://video-js.zencoder.com/oceans-clip.mp4
RTMP sample player videojs is a web player that supports RTMP. The code is as follows.
<!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/>
[email protected]</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>
The effect of the player is shown in. The URL of the video in the figure is rtmp://ams.studytv.cn/livepkgr/264
RTMP Sample Player JWPlayer
Official website of JW player: http://www.jwplayer.com
Note: the latest version of JW player does not seem to be able to use the RTMP playback function for free. The old version of JW player is used here
RTMP sample player jwplayer is an RTMP player based on JW player. There are two players:
Sample player jwplayer: http on demand web player
RTMP sample player jwplayer: RTMP web player
Sample player jwplayer is a web player that supports HTTP on demand. The code is as follows.
<!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/>
[email protected]</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‘,

};
</script>
</body>
</html>
The effect of the player is as shown in the figure. The URL of the video being played in the figure is local sintel.mp4
RTMP sample player jwplayer is a web player that supports RTMP. The code is as follows.
<!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/>
[email protected]</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‘,

};
</script>
<p>
Sample RTMP URL (Live) is "rtmp://wx.cnrmall.com/live/flv"
</p>
</body>
</html>
The effect of the player is shown in. The URL of the video in the figure is rtmp://wx.cnrmall.com/live/flv
HLS sample player flowplayerhls sample player flowplayer is a flowplayer added after the HLS plugin extension. After adding HLS plugin, flowplayer has increased its support for HLS. The code is as follows.
<!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/>
[email protected]</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>
The effect of the player is shown in. The URL of the video in the figure is http://stream.flowplayer.org/drive.m3u8
HLS video player HTML5 HTML5 video tag reference: http://www.w3school.com.cn/html5/html5_video.asp
HLS video player HTML5 is a web player (actually a web page) that uses the < video > tag of HTML5. The source code is shown below.
<!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/>
[email protected]</p>
<video src="sintel.mp4" controls="controls">
your browser does not support the video tag
</video>
</body>
</html>
Note here that < video > tags require HTML support from the browser. If the browser does not support HTML5, the following information will be displayed when you open the web page.
If your browser supports HTML5, open the web page as shown in. The URL of the video being played in the figure is sintel.mp4
ActiveX VLC Player
ActiveX VLC player is very different from the above web player, which is mainly used for comparison. ActiveX VLC player is an ActiveX control based player. Based on ActiveX control means that only ie supports this web player, and requires that VLC must be installed first.
Because of the almost omnipotent VLC media player, the performance of the web player is quite strong: it not only supports HTTP, RTMP, HLS supported by various players mentioned above, but also supports MMS, RTSP and UDP protocols (which are supported by VLC media player).
The source code of ActiveX VLC player is as follows.
<!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/>
[email protected]</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>
The effect of the player is as shown in the figure. The URL of the video being played in the figure is rtsp://58.248.254.7:9135/live/ds-mmzh.sdp
download
Simplest flashmedia example
SourceForge：https://sourceforge.net/projects/simplestflashmediaexample/
Github：https://github.com/leixiaohua1020/simplest_flashmedia_example
Open source China: http://git.oschina.net/leixiaohua1020/simple'flashmedia'example
CSDN Download: http://download.csdn.net/detail/leixiaohua1020/8456499
The project includes the following examples of streaming media based on flash technology:
Simple? AS3? RTMP? Player: the simplest RTMP player (based on ActionScript)
Simple? AS3? RTMP? Streamer: the simplest RTMP streamer (based on ActionScript)
RTMP? Sample? Player? Adobe: Test player extracted from Adobe Flash Media Server
RTMP? Sample? Player? Wowza: Test player extracted from wowza server
RTMP? Sample? Player? Flowplayer: RTMP / HTTP player based on flowplayer (add RTMP plugin)
RTMP? Sample? Player? Videojs: RTMP / HTTP player based on videojs
RTMP? Sample? Player? Jwplayer: RTMP / HTTP player based on jwplayer
HLS? Sample? Player? Flowplayer: HLS player based on flowplayer (add HLS plugin)
HLS video player HTML5: HLS / HTTP player based on HTML5
ActiveX VLC player: player of ActiveX Control Based on VLC
Note: some players can't work by opening HTML pages directly. You need to put the players on the web server.
(for example, Apache or nginx)
The simplest flash based streaming example: Web player (HTTP, RTMP, HLS)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
wd live streaming media player streaming media player with component video output streaming media player with component video output asus google nexus media streaming player wd tv live streaming media player hls web player http live streaming hls

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More