网站中视频都转换成flv格式,奈何flv格式无法拖拽,此问题纠结了好久,最终得以解决。现将解决思路记录下来,大多数源于网上找到的。

视频拖拽满足要求

1.播放器要支持

2.flv视频要有关键帧和meta信息

3.服务器端要支持

总体而言分两步:

一、视频关键帧的处理;二、Nginx代理服务器

1. 问题的产生

Flash视频播放方案原理其实比较简单:网页端放置一个Flash编写的播放器,播放器通过http协议访问一个flv文件,通过Flash本身的视频解码功能进行视频播放。在播放过程中,为了视频的流畅播放器会对接下来要播放部分的数据做一些预读取。

具体来说,我们只需要把flv文件放在网站目录下,让播放器指向这个地址就可以播放了。

但是,这样制作好的播放器方案,在实际使用中会遇到一个问题:当用户拖动进度到还未缓冲的部分时,播放器会停止播放或者是回到视频的开始。这就是标题中的“对未缓冲进度条实现拖动”。

2. 原理与解决

设想一下,对于本地视频文件的拖动,播放器需要调用哪些接口才能实现呢?

  1. 通过某个API得知视频中某时刻对应的数据相对于文件头的偏移量;
  2. 通过某个API得到视频数据中指定偏移量以后的数据;
  3. 播放器本身要支持偏移访问和播放

对于网络是视频,同样需要这两个关键的接口。很遗憾的,默认状态下(上面说的把flv文件直接放在IIS host的目录下)这两个条件都不具备。

  1. Flv文件一般不包含keyframe和meta信息。keyframe就是关键帧,而meta是元数据,通过它们,我们才能知道视频时间所对应的文件偏移量。
  2. IIS不提供文件位置偏移访问接口。

如何是好呢?有条件要上,没有条件创造条件也要上!对于Flv文件,那当然是加上keyframe和meta就好,如何加法待会儿一一道来。对于文件偏移访问接口,有两个思路:

  1. 替换掉IIS,使用支持偏移访问的Flv嘛;
  2. 给IIS创造文件偏移访问的接口,iis extension、custom http handler和server side script都可以。

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
  1. /// <summary>
  2. /// 处理flv实现添加matedata信息
  3. /// </summary>
  4. /// <param name="toolpath">toolpath="/FilesList/Exe/VideoTools/flvtool2.exe"</param>
  5. /// <param name="filepath">视频地址</param>
  6. public void flvtodrog(string toolpath, string filepath)
  7. {
  8. System.Diagnostics.ProcessStartInfo startInfo = new System.Diagnostics.ProcessStartInfo(toolpath);
  9. startInfo.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden;
  10. startInfo.UseShellExecute = false;
  11. startInfo.CreateNoWindow = false;
  12. startInfo.Arguments = " -U " + filepath;
  13. try
  14. {
  15. System.Diagnostics.Process.Start(startInfo);
  16. }
  17. catch (Exception e)
  18. {
  19. //
  20. }
  21. }

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服务环境下”,这里就大概说一下如何配置:

  1. 从nginx服务器下载最新的nginx 1.0 for windows,解压以后放置在某个目录下。
  2. nginx目前还没有写成windows服务,而只是应用程序。但是我们可以用这篇文章的办法,将它转变为一个服务。
  3. 在配置文件conf/nginx.conf中,添加如下语句:

location ~ \.flv$ 

flv; 
}

这里要注意,上面关于Nginx的参考文献中,这个配置写错了,将“flv;”写成了“.flv;”。

3.4 播放器支持

上面描述了服务端和视频所要实现的部分,最后一步是要一个支持拖动的flv播放器。这里推荐两个很成熟的播放器吧,他们对于非商业应用都是免费开源,而商业应用的价格也不贵:

  1. FlowPlayer:http://flowplayer.org/index.html
  2. JW Player:download.csdn.net/detail/chenxiang199055/5795723

这两个播放器都有很详细的文档介绍如何支持所谓的流媒体(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视频网站进度条随意拖放[转]相关推荐

  1. 从文件加密到到视频文件进度条播放揭秘

    文件加密 使用 Cipher CipherInputStream CipherOutputStream 实现对文件的加解密 每个文件使用一个秘钥 String aesKey = UUID.random ...

  2. Windows下获取视频设备的一种改进实现

    之前在https://blog.csdn.net/fengbingchun/article/details/102806822中介绍过在Windows下获取视频设备列表的方法.其实那种实现方法是有缺陷 ...

  3. vue 视频 时间进度条组件

    vue 视频 时间进度条组件 有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件 实现思路: 1,24h的时间刻度线总宽度为12960px 2,点击24h线的某一点,获取这 ...

  4. vue 视频 时间进度条组件-使用npm组件

    vue 视频 时间进度条组件 有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件 组件已上传到npm上,npm i as-time-line下载安装即可,最少需要1.2.0 ...

  5. 阿里云视频上传视频获取进度条问题(使用session方案,获取进度一直为0的解决方案)补充:前后端分离项目中获取进度解决方案

    1.场景描述: 之前用阿里云上传视频,前端反应上传视频经常出现获取视频url失败问题.但是接口我测过很多遍都是没有问题的.后台这边提供了一个视频上传的接口返回一个videoId,还提供了一个根据vid ...

  6. PPS卖给百度了:下一个视频网站还会远吗

    网络视频是目前重要的网络娱乐方式,十年间,这一行业已经催生出不少成气候的团队.然而,这些团队大多仍然面临着盈利上的压力或者困难,再加上人口红利的利好消失殆尽,一些不坚挺的团队已经被淘汰,也有一些团队通 ...

  7. MediaPlayer音乐播放器、上一首、下一首、播放、停止、自动下一首、进度条

    本文介绍MediaPlayer的使用.MediaPlayer可以播放音频和视频,另外也可以通过VideoView来播放视频,虽然VideoView比MediaPlayer简单易用,但定制性不如用Med ...

  8. 【原】Github系列之三:开源iOS下 渐变颜色的进度条WGradientProgress

    概述 今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有"B格".它拥有渐变的颜色, ...

  9. windows下python搭建网站_Windows平台下搭建Pytest

    Python有丰富的安装包资源,从图3可以看到有100293个安装包可以选择.跟C/C++/Java相比 ,Python能让你用极少的代码写出相同的程序,优势就是有这么多的安装包可选.有人计算过,Py ...

最新文章

  1. 获取app传入的json值处理
  2. Unsupported compiler 'GCC 4.2' selected for architecture 'i386'错误
  3. 01 | 基础架构:一条 SQL 查询语句是如何执行的
  4. mysql OA_mysql优化工具—mysqloa
  5. data-mask遮罩无法正常显示与编辑的问题
  6. Python使用matplotlib画动态图
  7. Python Selenium 调用IE浏览器失败Unexpected error launching Internet Explorer解决方法
  8. firebase_crashlytics缺失dSYM unity ios
  9. 计算机网络复习整理(二三四章习题)
  10. 关于Java工具eclipse的基本
  11. 中台核心秘密:建设过程中的组织架构
  12. sql语句-按照汉字拼音首字母排序
  13. 单片机中断实验2 EX0
  14. 项目一:瑞吉点餐中遇到的问题集
  15. MATLAB:海洋捕食者算法(MPA)优化BP神经网络权值和阈值用于月径流预测
  16. ECharts-Javascript的图表库推荐
  17. 写给初学者:电气制图规范和图纸识读方法——第二期
  18. Python 结合Ansible 把管理资产信息自动插入到CMDB中
  19. 脑机接口基础学习19---救救我吧,Evoked数据可视化
  20. 内忧外患 广交会采购商减少近一成

热门文章

  1. nodejs mysql备份_node.js实现备份mysql数据库功能
  2. Java路径问题最终解决方案
  3. Hibernate配置属性详解
  4. SQL Server,Oracle,DB2索引建立语句的对比
  5. 代理错误[WinError 10061]
  6. spring boot+mybatis整合
  7. 在echarts3中使用字符云
  8. oracle数据库常用关键字以及写法
  9. Kotlin学习笔记(1)- 环境配置
  10. Android之用PopupWindow实现弹出listview形式菜单