2. 程式人生 > >最簡單的基於Flash的流媒體示例：網頁播放器（HTTP，RTMP，HLS）

最簡單的基於Flash的流媒體示例：網頁播放器（HTTP，RTMP，HLS）

阿新 • • 發佈：2018-12-19
               

=====================================================Flash流媒體文章列表：

=====================================================

本文繼續上一篇文章，記錄一些基於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/> [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>
播放器的效果如下圖所示，圖中正在播放的視訊檔案的URL為http://video-js.zencoder.com/oceans-clip.mp4RTMP 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/> [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>
播放器的效果如下圖所示，圖中正在播放的視訊的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/> [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>
播放器的效果如下圖所示，圖中正在播放的視訊的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/> [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>
播放器的效果如下圖所示，圖中正在播放的視訊的URL為rtmp://ams.studytv.cn/livepkgr/264 

RTMP Sample Player JWPlayer

 

注：最新版的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/> [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',  '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/> [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',  '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/> [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>
播放器的效果如下圖所示，圖中正在播放的視訊的URL為http://stream.flowplayer.org/drive.m3u8

HLS Video Player Html5

 HTML5 Video標籤參考：http://www.w3school.com.cn/html5/html5_video.aspHLS 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/> [email protected]</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/> [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>
播放器的效果如下圖所示，圖中正在播放的視訊的URL為rtsp://58.248.254.7:9135/live/ds-mmzh.sdp

下載

Simplest flashmedia exampleSourceForge：https://sourceforge.net/projects/simplestflashmediaexample/Github：https://github.com/leixiaohua1020/simplest_flashmedia_example開源中國：http://git.oschina.net/leixiaohua1020/simplest_flashmedia_example本工程包含如下基於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）

                =====================================================Flash流媒體文章列表：=====================================================本文繼續上一篇文章，記錄一些基於Flas

最簡單的基於Flash的流媒體示例：RTMP推送和接收（ActionScript）

=====================================================Flash流媒體文章列表：=====================================================本文記錄一些基於Flash的流媒體處理

最簡單的基於DirectShow的示例：視訊播放器自定義版

=====================================================最簡單的基於DirectShow的示例文章列表：=====================================================本文記錄一個簡單

XBMC原始碼分析 4：視訊播放器（dvdplayer）-解碼器（以ffmpeg為例）

XBMC分析系列文章： 本文我們分析XBMC中視訊播放器（dvdplayer）中的解碼器部分。由於解碼器種類很多，不可能一一分析，因此以ffmpeg解碼器為例進行分析。 XBMC解碼器部分檔案目錄如下圖所示： 解碼器分為音訊解碼器和視訊解碼器。在這裡我們看一下視訊

XBMC原始碼分析 6：視訊播放器（dvdplayer）-檔案頭（以ffmpeg為例）

XBMC分析系列文章： XBMC原始碼簡析 5：視訊播放器（dvdplayer）-解複用器（以ffmpeg為例）本文我們分析XBMC中視訊播放器（dvdplayer）中的檔案頭部分。檔案頭部分裡包含的是封裝Dll用到的標頭檔案。由於檔案頭種類很多，不可能一一分析，

最簡單的基於librtmp的示例：釋出H.264（H.264通過RTMP釋出）

=====================================================最簡單的基於libRTMP的示例系列文章列表：=====================================================本文記錄一個基於l

最簡單的基於librtmp的示例：釋出H.264（H.264通過RTMP釋出）——雷神經典

===================================================== 最簡單的基於libRTMP的示例系列文章列表： ===================================================== 本文記錄一個基於libRTMP

如何看待Pensieve：MIT基於神經網路的流媒體位元速率自適應策略（周超）

寫在前面 今年的SIGCOMM上， MIT CSAIL的一支研究團隊，發表了一篇名為Pensieve的工作，即利用神經網路優化位元速率自適應演算法，用於提高媒體傳輸質量。文章結果表明：與一般的state-of-the-art 方法相比，Pensieve能平均提升QoE高達12%–25%。之

最簡單的視音訊播放示例6：OpenGL播放YUV420P（通過Texture，使用Shader）

=====================================================最簡單的視音訊播放示例系列文章列表：=====================================================本文記錄OpenGL播放視訊

最簡單的基於libVLC的例子：最簡單的基於libVLC的視訊播放器（圖形介面版）

=====================================================最簡單的基於libVLC的例子文章列表：=====================================================本文記錄使用libVLC

基於RTMP協議的Flash流媒體網頁直播播放器

    本文記錄一些基於Flash技術的網頁播放器。基於Flash的網頁播放器相比於其他網頁播放器來說最大的優勢就是“免外掛安裝”了，這一點可以很大的提高使用者的體驗質量。 主要是幾種常用的網頁播放器

java高併發系列 - 第15天：JUC中的Semaphore，最簡單的限流工具類，必備技能

這是java高併發系列第15篇文章 Semaphore（訊號量）為多執行緒協作提供了更為強大的控制方法，前面的文章中我們學了synchronized和重入鎖ReentrantLock，這2種鎖一次都只能允許一個執行緒訪問一個資源，而訊號量可以控制有多少個執行緒可以同時訪問特定的資源。 Semaphore常用

100行代碼實現最簡單的基於FFMPEG+SDL的視頻播放器（SDL1.x）【轉】

工程 全屏 升級版 gin avcodec ive 系列文章 相同 hello 轉自：http://blog.csdn.net/leixiaohua1020/article/details/8652605 版權聲明：本文為博主原創文章，未經博主允許不得轉載。

給定一個字串，找出不含有重複字元的最長子串的長度。 示例： 給定 "abcabcbb" ，沒有重複字元的最長子串是 "abc" ，那麼長度就是3。 給定 "bbbbb" ，最長的子串就是 "b

Str = raw_input('plese input Str:') def qiu_chongfu(Str2):#定義判斷字串是否含有重複字元，如有返回0，沒有返回1 biao = 0 for i in range(0,len(Str2)): for j in

MongoDB最簡單的入門教程之四：使用Spring Boot操作MongoDB

Spring Boot 是一個輕量級框架，可以完成基於 Spring 的應用程式的大部分配置工作。Spring Boot的目的是提供一組工具，以便快速構建容易配置的Spring應用程式,省去大量傳統Spring專案的繁瑣配置。 MongoDB是一個基於分散式檔

【css】最簡單的瀑布流佈局方法

前言：用column-count就能實現簡單的瀑布流佈局 一、程式碼 <body> <style> .parent { width:100%; -moz-co

Windows API程式設計——最簡單的視窗程式框架示例

 用Windows API實現一個自定義視窗也需要這麼一大堆最基本的程式框架： #include <windows.h> static LPCTSTR lpszAppName = "windows API 視窗示例";//視窗名稱 HBRUSH hBlueB

初識 vue —— 最簡單的前後端互動示例

一、學習 vue 面臨的問題 最近想學一門前端技術防身，看到部落格園中寫 vue 的多，那就 vue 吧。都說 vue 的官方教程寫得好，所以我就從官方教程開始學習。官方教程說“Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以

100行程式碼實現最簡單的基於FFMPEG+SDL的視訊播放器（SDL1.x）

                =====================================================最簡單的基於FFmpeg的視訊播放器系列文章列表：=====================================================簡介FFMPEG

最簡單的基於FFMPEG的視訊編碼器（YUV編碼為H.264）

                =====================================================最簡單的基於FFmpeg的視訊編碼器文章列表：=====================================================本文介紹一個最簡單的