搭建一個Flv視頻播放服務器

經過一天的努力,查了好多資料,終於搞定了Flv視頻服務器。本來這個事情沒那麼複雜的,無奈網上的很多資料都是錯漏百出,內容脫節的,包括一些官方站也是,實在讓人鬱悶不已。爲了讓大家能避免被錯誤的文檔誤導,寫個簡短文章給大家做參考。

目前,由於Flash的流行,網絡上絕大多數的微視頻網站都採用了Flv格式來播放視頻。

在互聯網上播放視頻,有兩種方式,一種是文件方式,即通過HTTP協議訪問視頻文件,這種方式的缺點是不能從特定的幀開始播放;另外一種就是採用專門的流媒體服務器,這種方式的缺點是要搭建複雜的流媒體服務器。不過,現在有了一種集合了以上兩種方式優點的一種解決方案,即通過HTTP來實現僞流媒體。本文描述的就是這樣的一種解決方案。

Flv播放器

首先,你需要有一個能夠播放Flv視頻的播放器,很顯然,它還需要能夠嵌入到網頁中。目前比較流行的,功能上也還比較完善的一個Flv播放器就是 JW FLV Media Player(也稱爲 jwplayer)。它的網址是:

http://www.longtailvideo.com/players/jw-flv-player/

本文寫作時,jwplayer的最新版本是4.6。它對於非商業使用是免費。

從上述網址下載jwplayer,輸入郵件地址即可下載一個壓縮包。

可以考慮下載使用帶有 Viral 插件的版本,Viral插件會在視頻播放完後,彈出一個窗口,可供瀏覽者將該視頻嵌入到其他網頁、發佈該視頻的URL和推薦該視頻,對於推廣視頻比較有用。

將包中的player.swf(如果是帶有Viral插件的,就是player-viral.swf)放到你的網站內,這就是用來提供視頻播放的播放器。至於包中其它的文件,都可以不要。

接下來,將播放器嵌入到你的視頻播放網頁中。嵌入的方式有兩種:

直接嵌入,使用Object/Embed代碼嵌入

<object id="player1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player1" width="328" height="200">
	<param name="movie" value="player.swf" />
	<param name="allowfullscreen" value="true" />
	<param name="allowscriptaccess" value="always" />
	<param name="flashvars" value="file=video.flvℑ=preview.jpg&autostart=false&type=http&streamer=start" />
	<embed
		type="application/x-shockwave-flash"
		id="player2"
		name="player2"
		src="player.swf" 
		width="328" 
		height="200"
		allowscriptaccess="always" 
		allowfullscreen="true"
		flashvars="file=video.flvℑ=preview.jpg&autostart=false&type=http&streamer=start" 
	/>
</object>

上面代碼中,你需要將video.flv和preview.jpg替換成你的視頻文件及其預覽圖。

基本上這種直接代碼嵌入的方式在各種瀏覽器中都是兼容的。但是,以上代碼在IE7+的某些安全設置下,播放Flash時會彈出安全提示,需要手動許可。所以,還有一種更好方式來嵌入,

使用swfobject來嵌入Flash:

swfobject是一個很小的JavaScript腳本(10k),該腳本引入了一個swfobject對象,用於在網頁內嵌入Flash,並避免了上述的安全提示。swfobject已經得到了廣泛的使用和好評。

swfobject在jwplayer包中也包含了一個,不過是很舊的1.5版,建議使用最新的版本。本文寫作時,最新的版本是2.2。swfobject可以從此下載(只需要其中的swfobject.js文件):

http://code.google.com/p/swfobject/

使用swfobject嵌入的代碼如下:

<html>
<script type="text/JavaScript" src="swfobject.js"></script>
<head>
<script type="text/JavaScript">

/* <![CDATA[ */
function createPlayer() {
    var flashvars = {
        file:"video.flv",
        type:"http",
        image:"preview.jpg",
        autostart:"false",
        streamer:"start"
    }
    var params = {
        allowfullscreen:"true",
        allowscriptaccess:"always"
    }
    var attributes = {
        id:"player1",
        name:"player1"
    }
    swfobject.embedSWF("player.swf", "placeholder1", "320", "196", "9.0.115", false, flashvars, params, attributes);
        }
/* ]]> */
</script>

</head>
<body οnlοad="createPlayer();">
    <div id="placeholder1"></div>
</body>
</html>

上述代碼中,首先引入swfobject.js,然後將實例化播放器的代碼放到head中;在body內放一個空的div用來爲播放器佔位,該div的ID(上例中是placeholder1)會被傳遞給swfobject.embedSWF()函數,swfobject會在該div內生成播放器;最後在body的onload事件中進行播放器的創建。

在上述的兩種代碼中,有兩個關鍵點

  • flashvars中的type參數的值應爲“http”,這表明了該視頻是通過http方式訪問的。
  • falshvars中的streamer參數的值應爲“start”,這個參數用於傳遞給服務器從特定的(關鍵)幀開始播放,沒有這個參數,視頻就不能拖到特定點播放。(lighttpd和nginx的Flv模塊都支持這個start參數)

此外,需要注意的是,如果一個Flv視頻要能夠被拖到特定點播放,該Flv需要在其metadata中有關鍵幀的信息。如果你的Flv視頻製作的時候沒有這些信息,也是不能拖放播放的。可以使用flvmdi來爲你的視頻加上關鍵幀信息,這是一個windows下的小程序,從此下載:

http://www.buraks.com/flvmdi/

完成了以上工作,那麼客戶端的播放器的顯示就可以工作了。接下來我們搭建用來提供Flv文件訪問的HTTPD服務器。

Flv視頻服務器

搭建Flv視頻服務器,建議採用輕量級的HTTP服務器,畢竟Flv文件只是靜態文件。輕量級的HTTP服務器有兩種選擇:lighttpd和nginx。選擇任何一個都可以,在提供Flv服務方面,兩者相差不多。

nginx

從nginx的網站下載最新的穩定版,本文寫作時的最新穩定版的版本是0.7.63:

http://nginx.net/

下載後進行編譯,要將“ --with-http_flv_module ” 加上,這個是用來專門提供Flv服務的模塊。nginx的編譯的其他選項及配置這裏就不多說了,只說明一下在配置中如何激活flv模塊:

在server配置中,加入如下語句,表明所有的flv文件由flv模塊進行處理:

location ~ \.flv { flv; }

lighttpd

從lighttpd下載最新的穩定版,本文寫作時的最新穩定版的版本是1.4.24:

http://www.lighttpd.net/

下載後編譯不需要特定選項,flv模塊是默認編譯進去的,但是在配置文件中並無此模塊,需要手動添加:

在server.modules區塊中加入如下語句來激活flv模塊(如果不是插入到最後一行,記得末尾的逗號):

"mod_flv_streaming",

然後在配置文件中增加如下行來說明所有的Flv文件都由flv模塊處理:

flv-streaming.extensions = ( ".flv" )

說明:在以上兩種HTTP服務器中,flv模塊實際上會接收通過拖放播出而傳遞的類似 “?start=1030435” 這樣的參數,並根據該參數傳遞從特定位置開始的視頻數據。

這樣,Flv視頻服務器就安裝好了。你可以試試播放Flv視頻,也可以看看拖放是否工作。

如果你需要播放mp4視頻,基本原理如上,只是需要額外的處理mp4文件的模塊,在此就不贅述了。

具體mp4例子可以參考:http://www.longtailvideo.com/players/jw-flv-player/下載的壓縮文件中帶的示例,只需將文件解壓,放置web服務器root目錄下,參考readme.html文件。注意該例子中包含的swfobject.js文件並不完整。
發佈了36 篇原創文章 · 獲贊 16 · 訪問量 15萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章