基于Web的视频缩略图动态生成技术研究

赵学孔　龙世荣

摘要：视频缩略图亦称视频预览图，是众多视频类网站上经常采用的一种视频呈现模式。传统视频网站主要采用手工机械方式采集视频缩略图，其效率低、成本高，且不利于后期维护。该文详细描述了Web视频网站中如何通过引入第三方开源免费的组件实现视频缩略图动态生成的技术方案，以期为本领域的研究者和系统开发者提供参考借鉴。

关键词：视频缩略图；动态生成；ASP.NET；Ffmpeg

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2015）10-0201-03

当前，许多视频类网站（如优酷网、乐视网等）都采用了视频缩略图的模式呈现多个视频信息，其一方面可增加网站页面的美观效果，另一方面也可以图片的形式告知用户视频主题信息，从而增强用户的体验度[1]。视频缩略图本质上是对视频中某一关键帧采集图像的缩影，其往往需要借助相关的图像捕获工具来实现。然而，对于拥有海量视频上传需求的视频网站而言，若单纯借助手工机械式的方式采集、上传图像，其效率低、成本高，且难于后期维护。为此，探究基于Web的视频缩略图动态生成技术对于本领域的研究者和系统开发者都具有现实意义。

1 视频缩略图生成技术现状

目前各种视频网站中都应用到了视频缩略图技术。以众人熟知的优酷网为例，该网站首页呈现了许多静态的小图像（即视频缩略图），当我们单击时即可打开该缩略图所对应的视频播放页面观看视频。那么网页中的这些缩略图是如何生成的呢？笔者通过实践调研发现，当前Web中的视频缩略图生成技术主要有两种方案：其一，借助相关的图像捕获工具（如红蜻蜓、QQ、视频播放器自带的抓图工具等）手工机械式地捕获图像信息，然后通过视频网站系统管理后台的上传功能分别将所捕获的图像与视频一起上传到服务器；其二，借助第三方组件和网页程序，视频网站系统管理后台自动生成所上传的视频缩略图并上传至服务器，无需用户单独采集图像信息上传至服务器。

对于以上两种技术方案，第一种方案适宜于小型的、单用户上传视频需求的网站；第二种方案则适宜于大型的、多用户上传视频需求的网站。显然，从用户的体验度来讲，第二种技术方案更适合实际需求，其体现了系统图像采集的智能化、动态化、便捷性等优势。为此，笔者结合自己开发经验，下面重点介绍第二种技术方案的实现过程，即Web环境下视频缩略图动态生成技术的解决方案。

2 基于Web的视频缩略图动态生成的解决方案

考虑到系统开发的高效性与稳定性，本研究拟采用第三方开源免费组件来解决Web环境下视频缩略图动态生成的技术问题；系统技术架构（或开发环境）主要采用微软ASP.NET框架开发。视频缩略图动态生成的实现主要涉及到上传页面和数据库设计、后台程序的编写两方面技术。

2.1 捕获图像工具介绍

目前，网络上出现的捕获图像工具很多，如红蜻蜓、PicPick、HyperSnap-DX和Greenshot等。此外，还有很多Web浏览器、视频播放器也自带了捕获图像工具。此时选取一个适合当前系统开发需要的工具尤为重要，应注意如下原则：1）满足开发环境（Java/ASP.NET/Php等）的需要；2）操作及实现原理简单，适合各级开发者使用；3）功能丰富、界面友好。结合笔者系统开发经验，本研究主要选取FFmpeg作为视频图像捕获工具，其与其他工具相比具有如下特点[2]：1）适合Web开发环境需要，能以组件形式与Web开发程序可无缝整合；2）功能丰富，支持各种视频输出格式（包括各种流媒体格式），支持音视频、图像信息捕获功能，且捕获效率高、速度快；3）开源免费使用，便于二次开发。

2.2 视频上传模块设计

一般而言，视频上传模块在系统中的呈现方式是灵活多样的，其可以是单独的上传页面形式，也可以是嵌入在页面中的“附件”形式。而对于开发者来说，不管是何种上传形式，在视频上传页面中应能获取到视频名、视频简介、视频路径、缩略图路径、上传作者、上传时间等关键信息，对应的数据库字段依次可设置为VideoName、VideoInfo、VideoDir、ImageDir、UpUser、UpTime。

2.3 关键技术

2.3.1 添加FFmpeg组件引用

在FFmpeg组件包中，主要包括FFmpeg.exe、FFplay.exe和FFprobe.exe三个文件，其封装了各种视频捕获、编码与解码方法。其中，FFmpeg.exe是该组件的核心文件，主要用于视频捕获、编码、解码功能等；FFplay.exe用户播放视频文件；FFprobe.exe用于查看文件格式[3]。系统开发中，需要将以上三个文件放置到网站文件目录下面，然后设置Web.config配置文件即可引用。

2.3.2 编辑Web.config配置文件

Web.config系统配置文件可用来定义系统的全局变量及属性。在服务器调用FFmpeg组件方法前，需要在Web.config系统配置文件中添加声明，并设置FFmpeg组件路径、视频文件的上传路径、缩略图生成路径、缩略图像素。其具体方法如下：

1）在“”结点之间添加FFmpeg组件调用路径：。此处表示定义FFmpeg对象，其隐射路径为网站根目录下面的FFmpeg.exe文件。

2）在“”结点之间分别添加视频文件的上传路径和视频缩略图的生成路径：；。此处表示上传视频文件至网站根目录下面的“ResourceFiles/VideoFiles”文件目录下面；生成的视频缩略图位于网站根目录下面的“ResourceFiles/ImgFiles”文件目录下面。

3）在“”结点之间添加视频缩略图的像素大小：。此处表示生成的视频缩略图像素为240x180，其中宽为240像素，高为180像素。

2.3.3 编写FFmpeg调用方法

FFmpeg组件封装了视频编码、解码、捕获等诸多功能，其需要通过定义具体的调用方法来实现。以图像捕获功能为例，构造其调用方法的关键代码为：

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 编写服务器端代码

定义好以上构造方法后即可开始编写服务器端功能页面的脚本。通常，服务器端视频缩略图的捕获发生在客户端上传视频的同步过程中，而视频上传是通过调用服务器端FileUpload控件中的Button按钮事件来实现的，因此，视频缩略图的方法调用需要写在服务器端Button按钮事件中。关键代码如下：

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

……

file.SaveAs（Path， true）； //视频上传代码

ffmpeg ff = new ffmpeg （）； //从命名空间中调用ffmpeg （）构造函数

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

if （UpVideoState == "成功" && ImgState == "成功"）{ //若视频上传成功，且生成缩略图成功，则向数据库插入新记录。

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

model. VideoName= VideoName； //给视频model对象属性赋值

……

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

bll.Add（model）； //调用BLL层方法向数据库添加新记录

}

}

3 基于Web的视频缩略图动态生成效果实现

笔者曾参与多项大型系统研发工作，其中很多系统都使用到了以上解决方案。以广西中小学微课资源网为例，本网站是在广西教育厅教师培训中心的领导下建立的面向广西中小学教师征集优质课例视频资源的门户网站系统。该系统须满足广大教师同时上传课堂录像文件的基本需求（见图1），同时能支持视频在线播放的功能。实践结果表明，利用以上解决方案可以在上传视频的同时自动生成视频缩略图（其效果见图2），且系统运行稳定流畅。

4 结束语

基于Web的视频缩略图动态生成技术是系统开发中经常遇到的一个棘手问题。利用第三方开源免费的图像捕获组件FFmpeg可以有效解决以上问题。本文以ASP.NET框架环境为例描述了如何借助第三方组件实现视频缩略图动态生成的技术方案，以期为相关研究领域和实践开发者提供参考借鉴。在后续研究中，我们将进一步探索其他框架环境下（如PHP、JSP等）视频缩略图动态生成的技术方案。

参考文献：

[1] 张维刚. 融合视觉内容分析的网络视频缩略图推荐[J]. 智能计算机与应用， 2014（3）： 5-7.

[2] 杨明成.教育视频分享网站的开发与应用[D]. 上海： 上海师范大学， 2010.

[3] 雷霄骅. FFMPEG视音频编解码零基础学习方法[EB/OL]. （2013-11-16）. http：//blog.csdn.net/leixiaohua1020/article/details/15811977.