趙學(xué)孔　龍世榮

摘要：視頻縮略圖亦稱視頻預(yù)覽圖，是眾多視頻類網(wǎng)站上經(jīng)常采用的一種視頻呈現(xiàn)模式。傳統(tǒng)視頻網(wǎng)站主要采用手工機械方式采集視頻縮略圖，其效率低、成本高，且不利于后期維護。該文詳細描述了Web視頻網(wǎng)站中如何通過引入第三方開源免費的組件實現(xiàn)視頻縮略圖動態(tài)生成的技術(shù)方案，以期為本領(lǐng)域的研究者和系統(tǒng)開發(fā)者提供參考借鑒。

關(guān)鍵詞：視頻縮略圖；動態(tài)生成；ASP.NET；Ffmpeg

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2015）10-0201-03

當(dāng)前，許多視頻類網(wǎng)站（如優(yōu)酷網(wǎng)、樂視網(wǎng)等）都采用了視頻縮略圖的模式呈現(xiàn)多個視頻信息，其一方面可增加網(wǎng)站頁面的美觀效果，另一方面也可以圖片的形式告知用戶視頻主題信息，從而增強用戶的體驗度[1]。視頻縮略圖本質(zhì)上是對視頻中某一關(guān)鍵幀采集圖像的縮影，其往往需要借助相關(guān)的圖像捕獲工具來實現(xiàn)。然而，對于擁有海量視頻上傳需求的視頻網(wǎng)站而言，若單純借助手工機械式的方式采集、上傳圖像，其效率低、成本高，且難于后期維護。為此，探究基于Web的視頻縮略圖動態(tài)生成技術(shù)對于本領(lǐng)域的研究者和系統(tǒng)開發(fā)者都具有現(xiàn)實意義。

1 視頻縮略圖生成技術(shù)現(xiàn)狀

目前各種視頻網(wǎng)站中都應(yīng)用到了視頻縮略圖技術(shù)。以眾人熟知的優(yōu)酷網(wǎng)為例，該網(wǎng)站首頁呈現(xiàn)了許多靜態(tài)的小圖像（即視頻縮略圖），當(dāng)我們單擊時即可打開該縮略圖所對應(yīng)的視頻播放頁面觀看視頻。那么網(wǎng)頁中的這些縮略圖是如何生成的呢？筆者通過實踐調(diào)研發(fā)現(xiàn)，當(dāng)前Web中的視頻縮略圖生成技術(shù)主要有兩種方案：其一，借助相關(guān)的圖像捕獲工具（如紅蜻蜓、QQ、視頻播放器自帶的抓圖工具等）手工機械式地捕獲圖像信息，然后通過視頻網(wǎng)站系統(tǒng)管理后臺的上傳功能分別將所捕獲的圖像與視頻一起上傳到服務(wù)器；其二，借助第三方組件和網(wǎng)頁程序，視頻網(wǎng)站系統(tǒng)管理后臺自動生成所上傳的視頻縮略圖并上傳至服務(wù)器，無需用戶單獨采集圖像信息上傳至服務(wù)器。

對于以上兩種技術(shù)方案，第一種方案適宜于小型的、單用戶上傳視頻需求的網(wǎng)站；第二種方案則適宜于大型的、多用戶上傳視頻需求的網(wǎng)站。顯然，從用戶的體驗度來講，第二種技術(shù)方案更適合實際需求，其體現(xiàn)了系統(tǒng)圖像采集的智能化、動態(tài)化、便捷性等優(yōu)勢。為此，筆者結(jié)合自己開發(fā)經(jīng)驗，下面重點介紹第二種技術(shù)方案的實現(xiàn)過程，即Web環(huán)境下視頻縮略圖動態(tài)生成技術(shù)的解決方案。

2 基于Web的視頻縮略圖動態(tài)生成的解決方案

考慮到系統(tǒng)開發(fā)的高效性與穩(wěn)定性，本研究擬采用第三方開源免費組件來解決Web環(huán)境下視頻縮略圖動態(tài)生成的技術(shù)問題；系統(tǒng)技術(shù)架構(gòu)（或開發(fā)環(huán)境）主要采用微軟ASP.NET框架開發(fā)。視頻縮略圖動態(tài)生成的實現(xiàn)主要涉及到上傳頁面和數(shù)據(jù)庫設(shè)計、后臺程序的編寫兩方面技術(shù)。

2.1 捕獲圖像工具介紹

目前，網(wǎng)絡(luò)上出現(xiàn)的捕獲圖像工具很多，如紅蜻蜓、PicPick、HyperSnap-DX和Greenshot等。此外，還有很多Web瀏覽器、視頻播放器也自帶了捕獲圖像工具。此時選取一個適合當(dāng)前系統(tǒng)開發(fā)需要的工具尤為重要，應(yīng)注意如下原則：1）滿足開發(fā)環(huán)境（Java/ASP.NET/Php等）的需要；2）操作及實現(xiàn)原理簡單，適合各級開發(fā)者使用；3）功能豐富、界面友好。結(jié)合筆者系統(tǒng)開發(fā)經(jīng)驗，本研究主要選取FFmpeg作為視頻圖像捕獲工具，其與其他工具相比具有如下特點[2]：1）適合Web開發(fā)環(huán)境需要，能以組件形式與Web開發(fā)程序可無縫整合；2）功能豐富，支持各種視頻輸出格式（包括各種流媒體格式），支持音視頻、圖像信息捕獲功能，且捕獲效率高、速度快；3）開源免費使用，便于二次開發(fā)。

2.2 視頻上傳模塊設(shè)計

一般而言，視頻上傳模塊在系統(tǒng)中的呈現(xiàn)方式是靈活多樣的，其可以是單獨的上傳頁面形式，也可以是嵌入在頁面中的“附件”形式。而對于開發(fā)者來說，不管是何種上傳形式，在視頻上傳頁面中應(yīng)能獲取到視頻名、視頻簡介、視頻路徑、縮略圖路徑、上傳作者、上傳時間等關(guān)鍵信息，對應(yīng)的數(shù)據(jù)庫字段依次可設(shè)置為VideoName、VideoInfo、VideoDir、ImageDir、UpUser、UpTime。

2.3 關(guān)鍵技術(shù)

2.3.1 添加FFmpeg組件引用

在FFmpeg組件包中，主要包括FFmpeg.exe、FFplay.exe和FFprobe.exe三個文件，其封裝了各種視頻捕獲、編碼與解碼方法。其中，F(xiàn)Fmpeg.exe是該組件的核心文件，主要用于視頻捕獲、編碼、解碼功能等；FFplay.exe用戶播放視頻文件；FFprobe.exe用于查看文件格式[3]。系統(tǒng)開發(fā)中，需要將以上三個文件放置到網(wǎng)站文件目錄下面，然后設(shè)置Web.config配置文件即可引用。

2.3.2 編輯Web.config配置文件

Web.config系統(tǒng)配置文件可用來定義系統(tǒng)的全局變量及屬性。在服務(wù)器調(diào)用FFmpeg組件方法前，需要在Web.config系統(tǒng)配置文件中添加聲明，并設(shè)置FFmpeg組件路徑、視頻文件的上傳路徑、縮略圖生成路徑、縮略圖像素。其具體方法如下：

1）在“”結(jié)點之間添加FFmpeg組件調(diào)用路徑：。此處表示定義FFmpeg對象，其隱射路徑為網(wǎng)站根目錄下面的FFmpeg.exe文件。

2）在“”結(jié)點之間分別添加視頻文件的上傳路徑和視頻縮略圖的生成路徑：；。此處表示上傳視頻文件至網(wǎng)站根目錄下面的“ResourceFiles/VideoFiles”文件目錄下面；生成的視頻縮略圖位于網(wǎng)站根目錄下面的“ResourceFiles/ImgFiles”文件目錄下面。

3）在“”結(jié)點之間添加視頻縮略圖的像素大小：。此處表示生成的視頻縮略圖像素為240x180，其中寬為240像素，高為180像素。

2.3.3 編寫FFmpeg調(diào)用方法

FFmpeg組件封裝了視頻編碼、解碼、捕獲等諸多功能，其需要通過定義具體的調(diào)用方法來實現(xiàn)。以圖像捕獲功能為例，構(gòu)造其調(diào)用方法的關(guān)鍵代碼為：

public string CatchImg（string fileName， string imgFile）{

string FFmpeg = Server.MapPath（ConfigurationManager.AppSettings["FFmpeg"]）；

string VideoImg = imgFile + ".jpg"；

string VideoImgSize = ConfigurationManager.AppSettings["CatchImgSize"]；

System.Diagnostics.ProcessStartInfo ImgstartInfo = new System.Diagnostics.ProcessStartInfo（FFmpeg）；

ImgstartInfo.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden；

ImgstartInfo.Arguments = "-i" + fileName + "-y -f image2 -ss 2 -vframes 1 -s " + VideoImgSize + " " + VideoImg； //定義捕獲視頻中的第2秒中圖像

try{ System.Diagnostics.Process.Start（ImgstartInfo）； }

catch{ return "出錯"；}

if （System.IO.File.Exists（VideoImg））{ return VideoImg；}

return "成功"；

}

2.3.4 編寫服務(wù)器端代碼

定義好以上構(gòu)造方法后即可開始編寫服務(wù)器端功能頁面的腳本。通常，服務(wù)器端視頻縮略圖的捕獲發(fā)生在客戶端上傳視頻的同步過程中，而視頻上傳是通過調(diào)用服務(wù)器端FileUpload控件中的Button按鈕事件來實現(xiàn)的，因此，視頻縮略圖的方法調(diào)用需要寫在服務(wù)器端Button按鈕事件中。關(guān)鍵代碼如下：

protected void btnSave_Click（object sender， EventArgs e）{ //Button按鈕事件

……

file.SaveAs（Path， true）； //視頻上傳代碼

ffmpeg ff = new ffmpeg （）； //從命名空間中調(diào)用ffmpeg （）構(gòu)造函數(shù)

string ImgState = ff.CatchImg（Server.MapPath（ConfigurationManager.AppSettings["UpVidioFile"]）， Server.MapPath（ConfigurationManager.AppSettings["ImgFile"]）；

if （UpVideoState == "成功" && ImgState == "成功"）{ //若視頻上傳成功，且生成縮略圖成功，則向數(shù)據(jù)庫插入新記錄。

VideoMis.Model.UpVideo model = new VideoMis.Model. UpVideo （）；

model. VideoName= VideoName； //給視頻model對象屬性賦值

……

VideoMis.BLL. UpVideo bll = new VideoMis.BLL. UpVideo （）；

bll.Add（model）； //調(diào)用BLL層方法向數(shù)據(jù)庫添加新記錄

}

}

3 基于Web的視頻縮略圖動態(tài)生成效果實現(xiàn)

筆者曾參與多項大型系統(tǒng)研發(fā)工作，其中很多系統(tǒng)都使用到了以上解決方案。以廣西中小學(xué)微課資源網(wǎng)為例，本網(wǎng)站是在廣西教育廳教師培訓(xùn)中心的領(lǐng)導(dǎo)下建立的面向廣西中小學(xué)教師征集優(yōu)質(zhì)課例視頻資源的門戶網(wǎng)站系統(tǒng)。該系統(tǒng)須滿足廣大教師同時上傳課堂錄像文件的基本需求（見圖1），同時能支持視頻在線播放的功能。實踐結(jié)果表明，利用以上解決方案可以在上傳視頻的同時自動生成視頻縮略圖（其效果見圖2），且系統(tǒng)運行穩(wěn)定流暢。

4 結(jié)束語

基于Web的視頻縮略圖動態(tài)生成技術(shù)是系統(tǒng)開發(fā)中經(jīng)常遇到的一個棘手問題。利用第三方開源免費的圖像捕獲組件FFmpeg可以有效解決以上問題。本文以ASP.NET框架環(huán)境為例描述了如何借助第三方組件實現(xiàn)視頻縮略圖動態(tài)生成的技術(shù)方案，以期為相關(guān)研究領(lǐng)域和實踐開發(fā)者提供參考借鑒。在后續(xù)研究中，我們將進一步探索其他框架環(huán)境下（如PHP、JSP等）視頻縮略圖動態(tài)生成的技術(shù)方案。

參考文獻：

[1] 張維剛. 融合視覺內(nèi)容分析的網(wǎng)絡(luò)視頻縮略圖推薦[J]. 智能計算機與應(yīng)用， 2014（3）： 5-7.

[2] 楊明成.教育視頻分享網(wǎng)站的開發(fā)與應(yīng)用[D]. 上海： 上海師范大學(xué)， 2010.

[3] 雷霄驊. FFMPEG視音頻編解碼零基礎(chǔ)學(xué)習(xí)方法[EB/OL]. （2013-11-16）. http：//blog.csdn.net/leixiaohua1020/article/details/15811977.