The simplest example of Flash-based streaming media: webpage players (HTTP, RTMP, HLS), rtmphls

Source: Internet
Author: User
Tags wowza wowza server

The simplest example of Flash-based streaming media: webpage players (HTTP, RTMP, HLS), rtmphls
This article continues with the previous article, recording some Flash-based streaming media processing examples. This article records some Web players based on Flash technology. Compared with other Web players, Flash-based Web players have the biggest advantage of "plug-in-free installation", which greatly improves the user experience quality. Earlier Network Videos (especially live videos) generally used ActiveX controls as video players, which were not widely used. Therefore, end users must download the relevant plug-ins to watch the program, as a result, many users who are not familiar with computers are faced with great obstacles. This obstacle was not solved until the Flash web player appeared. This article will record several commonly used Web players for future development and testing.


This document records the following common web players:

  • Rtmp_sample_player_adobe: Test player extracted from Adobe Flash Media Sever
  • Rtmp_sample_player_wowza: The test player extracted from the 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_audio PLAYER: RTMP/HTTP Player Based on audio player
  • Hls_sample_player_flowplayer: FlowPlayer-based HLS player (add HLS plugin)
  • Hls_video_player_html5: HTML5-based HLS/HTTP player
  • Activex_vlc_player: VLC-based ActiveX Control player


RTMP Sample Player Adobe is a test Player extracted from Adobe Flash Media Sever, which is convenient for testing and usage, paste the tested RTMP address to the "Stream URL" below and click "Play Stream" on the Right To Play the streaming media.
RTMP Sample Player Adobe is as follows.

 


RTMP Sample Player Wowza
RTMP Sample Player Wowza is a test Player extracted from the Wowza Streaming Engine. It is convenient to test and use it. You can paste the RTMP address to the corresponding input box, click start to play streaming media.
RTMP Sample Player Wowza is as follows.

RTMP Sample Player Flowplayer Official Website: http://flash.flowplayer.org/
Note: FlowPlayer has two versions: HTML5 and Flash. The Flash version is used in this article.

RTMP Sample Player Flowplayer is a Web Player based on FlowPlayer. There are two players:
  • Sample Player Flowplayer: http vod webpage Player
  • RTMP Sample Player Flowplayer: RTMP webpage Player
FlowPlayer supports HTTP on-demand native and RTMP is supported after RTMP Plugin extension.

Sample Player Flowplayer is a webpage Player that supports http vod. The Code is as follows.

The effect of the player is shown in the figure where the URL of the video file being played is the http://video-js.zencoder.com/oceans-clip.mp4


RTMP Sample Player Flowplayer is a webpage Player extended by RTMP Plugin. The Code is as follows.

<!DOCTYPE html>

Shows the effect of the player. the URL of the video being played 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 vod webpage Player
  • RTMP Sample Player VideoJS: RTMP webpage Player
Sample Player VideoJS is a webpage Player that supports http vod. The Code is as follows.
<!DOCTYPE html>

Shows the effect of the player, with the URL of the video being played in the figure being 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>

Shows the effect of the player. the URL of the video being played in the figure is rtmp: // ams.studytv.cn/livepkgr/264.
 


RTMP Sample Player Plugin Player

JW Player http://www.jwplayer.com

Note: The latest JW Player version does not seem to support RTMP playback for free. The old JW Player version is used here.


RTMP Sample Player is an RTMP Player Based on JW Player. There are two players:
  • Sample Player: http vod webpage Player
  • RTMP Sample Player: RTMP webpage Player
Sample Player is a webpage Player that supports http vod. The Code is as follows.
<!DOCTYPE html>

As shown in the following figure, the current video URL is sintel.mp4.
 

RTMP Sample Player is a Web Player that supports RTMP. The Code is as follows.
<!DOCTYPE html>

Shows the effect of the player. the URL of the video being played in the figure is rtmp: // wx.cnrmall.com/live/flv


HLS Sample Player FlowplayerHLS Sample Player Flowplayer is a FlowPlayer with the added HLS Plugin extension. After the HLS Plugin is added, FlowPlayer adds support for HLS. The Code is as follows.
<!DOCTYPE HTML>

Shows the effect of the player, with the URL of the video being played in the figure being http://stream.flowplayer.org/drive.m3u8


HLS Video Player Html5 HTML5 Video label reference: http://www.w3school.com.cn/html5/html5_video.asp
HLS Video Player Html5 is a webpage Player that uses the HTML5 <Video> label (actually a webpage ). The source code is as follows.
<!DOCTYPE HTML>

Note that the <video> tag must support HTML in the browser. If the browser does not support HTML5, the following information is displayed when you open the webpage.
If the browser supports HTML5, the effect of opening a webpage is shown in. The URL of the video in the figure is sintel.mp4.


ActiveX VLC Player
ActiveX VLC Player differs greatly from the preceding web Player, and is mainly used for comparison. ActiveX VLC Player is an ActiveX control-based Player. ActiveX-based control means that only IE supports the Web player, and VLC must be installed on the local machine first.
Backed by almost omnipotent VLC Media Player, this webpage Player has a strong performance: not only does it support the HTTP, RTMP, and HLS supported by the various players mentioned above, it also supports MMS, RTSP, and UDP protocols (all protocols supported by VLC Media Player ).
The source code of ActiveX VLC Player is as follows.
<!DOCTYPE HTML>

The player effect is shown in the figure. The URL of the video being played 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/simplest_flashmedia_example

CSDN download: http://download.csdn.net/detail/leixiaohua1020/8456499


This project contains the following example of streaming media based on Flash technology:
Simplest_as3_rtmp_player: the simplest RTMP player (based on ActionScript)
Simplest_as3_rtmp_streamer: the simplest RTMP streamer (based on ActionScript)
Rtmp_sample_player_adobe: Test player extracted from Adobe Flash Media Sever
Rtmp_sample_player_wowza: The test player extracted from the 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_audio PLAYER: RTMP/HTTP Player Based on audio player
Hls_sample_player_flowplayer: FlowPlayer-based HLS player (add HLS plugin)
Hls_video_player_html5: HTML5-based HLS/HTTP player
Activex_vlc_player: VLC-based ActiveX Control player

Note: Some players cannot open html pages directly. You need to put the player on the Web server.
(For example, Apache or Nginx)





Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.