windows下flv视频网站进度条随意拖放[转]
網站中視頻都轉換成flv格式,奈何flv格式無法拖拽,此問題糾結了好久,最終得以解決。現將解決思路記錄下來,大多數源于網上找到的。
視頻拖拽滿足要求
1.播放器要支持
2.flv視頻要有關鍵幀和meta信息
3.服務器端要支持
總體而言分兩步:
一、視頻關鍵幀的處理;二、Nginx代理服務器
1. 問題的產生
Flash視頻播放方案原理其實比較簡單:網頁端放置一個Flash編寫的播放器,播放器通過http協議訪問一個flv文件,通過Flash本身的視頻解碼功能進行視頻播放。在播放過程中,為了視頻的流暢播放器會對接下來要播放部分的數據做一些預讀取。
具體來說,我們只需要把flv文件放在網站目錄下,讓播放器指向這個地址就可以播放了。
但是,這樣制作好的播放器方案,在實際使用中會遇到一個問題:當用戶拖動進度到還未緩沖的部分時,播放器會停止播放或者是回到視頻的開始。這就是標題中的“對未緩沖進度條實現拖動”。
?
2. 原理與解決
設想一下,對于本地視頻文件的拖動,播放器需要調用哪些接口才能實現呢?
對于網絡是視頻,同樣需要這兩個關鍵的接口。很遺憾的,默認狀態下(上面說的把flv文件直接放在IIS host的目錄下)這兩個條件都不具備。
如何是好呢?有條件要上,沒有條件創造條件也要上!對于Flv文件,那當然是加上keyframe和meta就好,如何加法待會兒一一道來。對于文件偏移訪問接口,有兩個思路:
3. 實現
3.1 flv文件的meta生成
上面提到,flv需要有meta信息才能正確地被分析并根據時間獲取偏移量。有兩個工具可以補全meta信息:
- flvtool2:ruby寫的一個著名工具,地址:https://rubyforge.org/projects/flvtool2/
- jamdi:另外一個補全meta信息的工具,地址:http://yamdi.sourceforge.net/
兩者都是命令行工具,也都有windows版本,下載了直接用就好。這里簡單介紹一下用法:
flvtool2:
flvtool2 –U <input file> <output file>
?
[csharp]?view plaincopy?
jamdi:
jamdi –i <input file> –o <output file>
如此,meta信息就補全了。
?
3.2 使用IIS作為Web服務器的方法
?
IIS是Windows默認Web服務器,在Windows下不用它很難(雖然不少裝Apache的),而且尤其是當你的網站是ASP.net寫成的話。上面說過,IIS默認是不支持文件偏移訪問的,我們要創造條件讓它能夠支持。這里提供兩種方法:
3.2.1 Custom Http Handler
給IIS置入一個Custom Http Handler,讓它來處理所有對flv的請求,這就行了。簡略的步驟是:
1、使用任何一種CLR語言編寫一個Custom Http Handler,這個Handler接受兩個參數,第一個是flv文件名,第二個是start為參數名的偏移量,返回這個偏移量到文件尾的所有數據。
2、將上面的Http Handler部署到IIS中。
3、在IIS中將所有對.flv文件的訪問定向到這個Custom Http Handler上。
具體的步驟還是挺多,有人總結的很好,這里不再重復了。步驟和源代碼在這里。
3.2.1 PHP代理
當IIS已經配置好了PHP的時候,使用PHP代理也不失為一種簡潔有效的方法了。這種方法的步驟非常簡單:
1、編寫一個php頁面,這個頁面接受兩個參數,第一個是文件名,第二個是start為參數名得偏移量,php讀取flv文件并返回從偏移量到文件尾的數據。
步驟相當簡單,而且這個解決方案幾乎是可以橫跨所有Web Server和所有操作系統了,只要是能執行php的地方都可以應用。但是這種方法有兩個缺點:
- PHP的效率可能會有問題;
- 對flv文件的位置有限制(這一點當你看了下面連接中的php代碼以后就能了解)
具體的PHP代碼見這里。
3.3 使用其它Web服務器
其實下面這些服務器都可以通過插件實現這功能:
- Apache:見這里;
- Nginx:見這里;
- Lighttpd:見這里;
基本主流的Web Server都有支持了,不過基本也都要求在編譯時通過開關把這部分包含進去。
經過我的試驗,最新的Nginx 1.0 for windows這個版本默認已經開啟了這個開關,我們直接下載使用就好。既然標題上說的是“Windows服務環境下”,這里就大概說一下如何配置:
location ~ \.flv$?
{?
flv;?
}
這里要注意,上面關于Nginx的參考文獻中,這個配置寫錯了,將“flv;”寫成了“.flv;”。
3.4 播放器支持
上面描述了服務端和視頻所要實現的部分,最后一步是要一個支持拖動的flv播放器。這里推薦兩個很成熟的播放器吧,他們對于非商業應用都是免費開源,而商業應用的價格也不貴:
這兩個播放器都有很詳細的文檔介紹如何支持所謂的流媒體(Flv streaming),也就是本文說的拖動。
4. 其它
本文介紹的解決方案,其實有很多種名字:
- Flv(flash) Streaming
- Pseudostreaming
- Flv未緩沖視頻拖動
從第二個名字看來,它是一種“假”的流媒體。但是這種方案比起假設真的流媒體服務器并不遜色,不用架設專業甚至昂貴的流媒體服務器。也算是一種DIY的收獲吧。
其實FlowPlayer的網站上也有一篇非常詳細的綜述性質的文章,可以和本文互為參考。
另外,對于高清視頻,H264有一個比較統一的解決方案(IIS、Nginx、Apache、Lighttpd全機種制霸了),不用像flv這么折騰,具體參考這里。
?
?
5. nginx安裝與配置
首先配置nginx服務支持flv模塊功能
⑵安裝支持flv模塊的nginx服務器:
nginx下載地址http://download.csdn.net/detail/chenxiang199055/6204511
?
解壓至c:\nginx,運行nginx.exe(即nginx -c conf\nginx.conf),默認使用80端口(建議修改,資源中默認端口為8055),日志見文件夾C:\nginx\logs
?
cd c:\ cd nginx start nginx?
?
| nginx -s stop | 快速退出 |
| nginx -s quit | 優雅退出 |
| nginx -s reload | 更換配置,啟動新的工作進程,優雅的關閉以往的工作進程 |
| nginx -s reopen | 重新打開日志文件 |
?
打開http://127.0.0.1:端口號/ 可以看到nginx歡迎頁,如果沒有看到檢查nginx配置
?
⑶nginx服務器配置(nginx.conf文件)
server
??{
listen???????80;???//此端口號如果被占用可以修改,建議修改
server_name??localhost;???
charset?utf-8;
?location?/?{
????????????root???html;?//此處指flv視頻所在文件夾,注意修改
????????????index??index.php?index.html?index.htm;
????????}
??location?~?\.flv?{
????????????flv;
???limit_rate_after?10m;
???limit_conn?one?1;???
???limit_rate?85k;
????????}
??}
使用location?將?.flv的文件指向flv模塊即可。
以上使用了limit_rate?是為了限速,當?flv視頻下載超過10M,則限速到85K,只允許用戶開1個進程,也就是先快速緩存可以播放,后面的慢慢下載。
⑷安裝支持flv拖放進度條的播放器
上面三步都是安裝支持nginx服務支持flv功能的,現在需要支持flv拖放進度條的播放器.
你需要有一個能夠播放Flv視頻的播放器,很顯然,它還需要能夠嵌入到網頁中。目前比較流行的,功能上也還比較完善的一個Flv播放器就是?JW?FLV?Media?Player(也稱為?jwplayer)。它的網址是:
http://www.longtailvideo.com/players/jw-flv-player/
這個播放器支持視頻加入廣告和視頻節目單功能,
下載包里面有很全的實例和使用方式,
將包中的player.swf(如果是帶有Viral插件的,就是player-viral.swf)放到你的網站內,這就是用來提供視頻播放的播放器。至于包中其它的文件,都可以不要。
接下來,將播放器嵌入到你的視頻播放網頁中:
直接嵌入,使用Object/Embed代碼嵌入:
<embed??
????????type="application/x-shockwave-flash"??
????????id="player2"??
????????name="player2"??
????????src="player.swf"???
????????width="328"???
????????height="200"??
????????allowscriptaccess="always"???
????????allowfullscreen="true"??
????????flashvars="file=http://192.168.40.135/test.flv&image=http://192.168.40.135/preview.jpg&autostart=false&type=http&streamer=start"???
????>??</embed>
file:"video.flv",?//?FLV視頻地址
type:"http",????????//?數據類型,本文是基于http模式的,這個必須寫滴
image:"preview.jpg",//?開始播放之前的預覽圖
autostart:"false",??//?是否自動播放
streamer:"start",???//?參數為?“start”,這個參數用于傳遞給服務器從特定的關鍵幀開始播放,nginx編譯了?flv?模塊?所以是支持的。。
⑸添加關鍵幀
如果一個Flv視頻要能夠被拖到特定點播放,該Flv需要在其metadata中有關鍵幀的信息。如果你的Flv視頻制作的時候沒有這些信息,也是不能拖放播放的。可以使用yamdi來為你的視頻加上關鍵幀信息?:
安裝:
1 [root@localhost?~]#wget?http://sourceforge.net/projects/yamdi/files/yamdi/1.4/yamdi-1.4.tar.gz/download
2 [root@localhost?~]#tar?zxvf?yamdi-1.4.tar.gz
3 [root@localhost?~]#cd?yamdi-1.4/
4 [root@localhost?yamdi-1.4]#make?&&?make?install
使用方法:
yamdi?-i?source.flv?-o?dest.flv?//原視頻?輸出視頻
總結
以上是生活随笔為你收集整理的windows下flv视频网站进度条随意拖放[转]的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 通向架构师的道路(第十七天)IBM We
- 下一篇: ZeroMQ接口函数之 :zmq - 0