Flv文件和Flash视频播放随着Youtube的流行,若干年前成为了网页视频播放的主流方案。当然,随着HTML和H264的普及,这个解决方案淡出也是迟早的事情了。但是作为这两天得折腾成功,还是把其中的一个典型问题记录在这里吧。
Flash视频播放方案原理其实比较简单:网页端放置一个Flash编写的播放器,播放器通过http协议访问一个flv文件,通过Flash本身的视频解码功能进行视频播放。在播放过程中,为了视频的流畅播放器会对接下来要播放部分的数据做一些预读取。
具体来说,我们只需要把flv文件放在网站目录下,让播放器指向这个地址就可以播放了。
但是,这样制作好的播放器方案,在实际使用中会遇到一个问题:当用户拖动进度到还未缓冲的部分时,播放器会停止播放或者是回到视频的开始。这就是标题中的“对未缓冲进度条实现拖动”。
设想一下,对于本地视频文件的拖动,播放器需要调用哪些接口才能实现呢?
对于网络是视频,同样需要这两个关键的接口。很遗憾的,默认状态下(上面说的把flv文件直接放在IIS host的目录下)这两个条件都不具备。
如何是好呢?有条件要上,没有条件创造条件也要上!对于Flv文件,那当然是加上keyframe和meta就好,如何加法待会儿一一道来。对于文件偏移访问接口,有两个思路:
上面提到,flv需要有meta信息才能正确地被分析并根据时间获取偏移量。有两个工具可以补全meta信息:
两者都是命令行工具,也都有windows版本,下载了直接用就好。这里简单介绍一下用法:
flvtool2:
flvtool2 –U <input file> <output file>
jamdi:
jamdi –i <input file> –o <output file>
如此,meta信息就补全了。
IIS是Windows默认Web服务器,在Windows下不用它很难(虽然不少装Apache的),而且尤其是当你的网站是ASP.net写成的话。上面说过,IIS默认是不支持文件偏移访问的,我们要创造条件让它能够支持。这里提供两种方法:
给IIS置入一个Custom Http Handler,让它来处理所有对flv的请求,这就行了。简略的步骤是:
1、使用任何一种CLR语言编写一个Custom Http Handler,这个Handler接受两个参数,第一个是flv文件名,第二个是start为参数名的偏移量,返回这个偏移量到文件尾的所有数据。
2、将上面的Http Handler部署到IIS中。
3、在IIS中将所有对.flv文件的访问定向到这个Custom Http Handler上。
具体的步骤还是挺多,有人总结的很好,这里不再重复了。步骤和源代码在这里。
当IIS已经配置好了PHP的时候,使用PHP代理也不失为一种简洁有效的方法了。这种方法的步骤非常简单:
1、编写一个php页面,这个页面接受两个参数,第一个是文件名,第二个是start为参数名得偏移量,php读取flv文件并返回从偏移量到文件尾的数据。
步骤相当简单,而且这个解决方案几乎是可以横跨所有Web Server和所有操作系统了,只要是能执行php的地方都可以应用。但是这种方法有两个缺点:
具体的PHP代码见这里。
其实下面这些服务器都可以通过插件实现这功能:
基本主流的Web Server都有支持了,不过基本也都要求在编译时通过开关把这部分包含进去。
经过我的试验,最新的Nginx 1.0 for windows这个版本默认已经开启了这个开关,我们直接下载使用就好。既然标题上说的是“Windows服务环境下”,这里就大概说一下如何配置:
location ~ \.flv$
{
flv;
}
这里要注意,上面关于Nginx的参考文献中,这个配置写错了,将“flv;”写成了“.flv;”。
上面描述了服务端和视频所要实现的部分,最后一步是要一个支持拖动的flv播放器。这里推荐两个很成熟的播放器吧,他们对于非商业应用都是免费开源,而商业应用的价格也不贵:
这两个播放器都有很详细的文档介绍如何支持所谓的流媒体(Flv streaming),也就是本文说的拖动。
本文介绍的解决方案,其实有很多种名字:
从第二个名字看来,它是一种“假”的流媒体。但是这种方案比起假设真的流媒体服务器并不逊色,不用架设专业甚至昂贵的流媒体服务器。也算是一种DIY的收获吧。
其实FlowPlayer的网站上也有一篇非常详细的综述性质的文章,可以和本文互为参考。
另外,对于高清视频,H264有一个比较统一的解决方案(IIS、Nginx、Apache、Lighttpd全机种制霸了),不用像flv这么折腾,具体参考这里。