windows下flv视频网站进度条随意拖放[转]
網(wǎng)站中視頻都轉換成flv格式，奈何flv格式無法拖拽，此問題糾結了好久，最終得以解決。現(xiàn)將解決思路記錄下來，大多數(shù)源于網(wǎng)上找到的。
視頻拖拽滿足要求
1.播放器要支持
2.flv視頻要有關鍵幀和meta信息
3.服務器端要支持
總體而言分兩步：
一、視頻關鍵幀的處理；二、Nginx代理服務器
1. 問題的產(chǎn)生
Flash視頻播放方案原理其實比較簡單：網(wǎng)頁端放置一個Flash編寫的播放器，播放器通過http協(xié)議訪問一個flv文件，通過Flash本身的視頻解碼功能進行視頻播放。在播放過程中，為了視頻的流暢播放器會對接下來要播放部分的數(shù)據(jù)做一些預讀取。
具體來說，我們只需要把flv文件放在網(wǎng)站目錄下，讓播放器指向這個地址就可以播放了。
但是，這樣制作好的播放器方案，在實際使用中會遇到一個問題：當用戶拖動進度到還未緩沖的部分時，播放器會停止播放或者是回到視頻的開始。這就是標題中的“對未緩沖進度條實現(xiàn)拖動”。
?
2. 原理與解決
設想一下，對于本地視頻文件的拖動，播放器需要調用哪些接口才能實現(xiàn)呢？
對于網(wǎng)絡是視頻，同樣需要這兩個關鍵的接口。很遺憾的，默認狀態(tài)下（上面說的把flv文件直接放在IIS host的目錄下）這兩個條件都不具備。
如何是好呢？有條件要上，沒有條件創(chuàng)造條件也要上！對于Flv文件，那當然是加上keyframe和meta就好，如何加法待會兒一一道來。對于文件偏移訪問接口，有兩個思路：
3. 實現(xiàn)
3.1 flv文件的meta生成
上面提到，flv需要有meta信息才能正確地被分析并根據(jù)時間獲取偏移量。有兩個工具可以補全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的），而且尤其是當你的網(wǎng)站是ASP.net寫成的話。上面說過，IIS默認是不支持文件偏移訪問的，我們要創(chuàng)造條件讓它能夠支持。這里提供兩種方法：
3.2.1 Custom Http Handler
給IIS置入一個Custom Http Handler，讓它來處理所有對flv的請求，這就行了。簡略的步驟是：
1、使用任何一種CLR語言編寫一個Custom Http Handler，這個Handler接受兩個參數(shù)，第一個是flv文件名，第二個是start為參數(shù)名的偏移量，返回這個偏移量到文件尾的所有數(shù)據(jù)。
2、將上面的Http Handler部署到IIS中。
3、在IIS中將所有對.flv文件的訪問定向到這個Custom Http Handler上。
具體的步驟還是挺多，有人總結的很好，這里不再重復了。步驟和源代碼在這里。
3.2.1 PHP代理
當IIS已經(jīng)配置好了PHP的時候，使用PHP代理也不失為一種簡潔有效的方法了。這種方法的步驟非常簡單：
1、編寫一個php頁面，這個頁面接受兩個參數(shù)，第一個是文件名，第二個是start為參數(shù)名得偏移量，php讀取flv文件并返回從偏移量到文件尾的數(shù)據(jù)。
步驟相當簡單，而且這個解決方案幾乎是可以橫跨所有Web Server和所有操作系統(tǒng)了，只要是能執(zhí)行php的地方都可以應用。但是這種方法有兩個缺點：
- PHP的效率可能會有問題；
- 對flv文件的位置有限制（這一點當你看了下面連接中的php代碼以后就能了解）
具體的PHP代碼見這里。
3.3 使用其它Web服務器
其實下面這些服務器都可以通過插件實現(xiàn)這功能：
- Apache：見這里；
- Nginx：見這里；
- Lighttpd：見這里；
基本主流的Web Server都有支持了，不過基本也都要求在編譯時通過開關把這部分包含進去。
經(jīng)過我的試驗，最新的Nginx 1.0 for windows這個版本默認已經(jīng)開啟了這個開關，我們直接下載使用就好。既然標題上說的是“Windows服務環(huán)境下”，這里就大概說一下如何配置：
location ~ \.flv$?
{?
flv;?
}
這里要注意，上面關于Nginx的參考文獻中，這個配置寫錯了，將“flv;”寫成了“.flv;”。
3.4 播放器支持
上面描述了服務端和視頻所要實現(xiàn)的部分，最后一步是要一個支持拖動的flv播放器。這里推薦兩個很成熟的播放器吧，他們對于非商業(yè)應用都是免費開源，而商業(yè)應用的價格也不貴：
這兩個播放器都有很詳細的文檔介紹如何支持所謂的流媒體（Flv streaming），也就是本文說的拖動。
4. 其它
本文介紹的解決方案，其實有很多種名字：
- Flv(flash) Streaming
- Pseudostreaming
- Flv未緩沖視頻拖動
從第二個名字看來，它是一種“假”的流媒體。但是這種方案比起假設真的流媒體服務器并不遜色，不用架設專業(yè)甚至昂貴的流媒體服務器。也算是一種DIY的收獲吧。
其實FlowPlayer的網(wǎng)站上也有一篇非常詳細的綜述性質的文章，可以和本文互為參考。
另外，對于高清視頻，H264有一個比較統(tǒng)一的解決方案（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 | 優(yōu)雅退出 |
| nginx -s reload | 更換配置，啟動新的工作進程，優(yōu)雅的關閉以往的工作進程 |
| 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功能的，現(xiàn)在需要支持flv拖放進度條的播放器.
你需要有一個能夠播放Flv視頻的播放器，很顯然，它還需要能夠嵌入到網(wǎng)頁中。目前比較流行的，功能上也還比較完善的一個Flv播放器就是?JW?FLV?Media?Player（也稱為?jwplayer）。它的網(wǎng)址是：
http://www.longtailvideo.com/players/jw-flv-player/
這個播放器支持視頻加入廣告和視頻節(jié)目單功能，
下載包里面有很全的實例和使用方式，
將包中的player.swf（如果是帶有Viral插件的，就是player-viral.swf）放到你的網(wǎng)站內，這就是用來提供視頻播放的播放器。至于包中其它的文件，都可以不要。
接下來，將播放器嵌入到你的視頻播放網(wǎng)頁中：
直接嵌入，使用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",????????//?數(shù)據(jù)類型，本文是基于http模式的，這個必須寫滴
image:"preview.jpg",//?開始播放之前的預覽圖
autostart:"false",??//?是否自動播放
streamer:"start"，???//?參數(shù)為?“start”,這個參數(shù)用于傳遞給服務器從特定的關鍵幀開始播放，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
- 下一篇： windows环境下Oracle数据库冷