1. 程式人生 > >基於Flash的開源網頁播放器使用方法(FlowPlayer/AdobePlayer)

基於Flash的開源網頁播放器使用方法(FlowPlayer/AdobePlayer)

對WEB的視訊解碼,傳統是通過WEB網頁載入ActiveX控制元件來播放視訊,這樣使用者在播放視訊的時候需要安裝控制元件,非專業使用者可能覺得麻煩。直到FLASH播放器的出現,才解決這個問題。本篇記錄一下幾個FLASH播放器的使用方法,方便進行RTMP開發時候測試用。因為RTMP協議最初開發針對的就是FLASH平臺直接的流媒體通訊,RTMP最大特點“無外掛”直播,這也得益於在客戶端大量安裝的FLASH播放器。所以測試RTMP最好用FLASH播放器。

本例子都是把播放器部署在nginx伺服器上,文章最後的下載地址裡面,已經配置好了nginx伺服器和RTMP伺服器模組,啟動nginx後HTTP和RTMP伺服器都開啟了,播放器都放在NGINX相應的目錄裡面。

 

FlowPlayer 

FlowPlayer官網:http://flash.flowplayer.org/,下載FLASH版本後放入 :安裝目錄\nginx-1.7.11.3\html\

1.啟動NGINX伺服器。cmd:nginx.exe -c conf\nginx-win-rtmp.conf。

2.IE輸入地址:http://localhost/Flowplayer/FlowplayerFile.html 播放本地檔案

               

3.用ffmpeg把本地264檔案推送到到RTMP伺服器。-re選項表示按幀率推送,必須加否則一下子全推完了。

ffmpeg -re -i huangdun.264 -vcodec copy -an -f flv rtmp://192.168.1.110:1935/live/home

4.修改播放地址,開啟FlowplayerRtmp.html 檔案,主要修改“live”和“netConnectionUrl”。

flowplayer("player", "flowplayer-3.2.8.swf",{ 
		clip: { 
		  url: 'home',
		  provider: 'rtmp',
		  live: true, 
		},  
		plugins: {  
		   rtmp: {  
			 url: 'flowplayer.rtmp-3.2.8.swf',  
			 netConnectionUrl: 'rtmp://192.168.1.110:1935/live'
		   } 
	        } 
	});

5.IE輸入地址:http://localhost/Flowplayer/FlowplayerRtmp.html 播放RTMP檔案。 

                

RTMP Sample Player Adobe

Adobe Flash Media Sever提取出來的測試播放器,平時測試使用非常方便,把測試的RTMP地址貼上到下方的“Stream URL”裡面,單擊右側紅色的“Play Stream”就可以播放流媒體了。

1.啟動NGINX伺服器。cmd:nginx.exe -c conf\nginx-win-rtmp.conf。

2.IE輸入地址:http://localhost/AdobePlayer/videoplayer.html 即可播放RTMP音視訊流,不需要修改HTML程式碼檔案。

            

 

NGINX服務與播放器下載地址 NGINX+RTMP+FLASH_Player配置好直接用