视频支持拖动进度条播放的实现(基于nginx)
http协议下的flv/mp4流式播放支持的三个要点:
1 服务器端要支持flv/mp4流式播放,现在nginx或者lighttpd都是支持这样的应用的,还支持mp4的流式播放(默认编译版本一般都是打开了flv流式播放,而mp4要自己编译,若需要,也可以自己编译),但要专门配置。
参考文章《使用Nginx搭建flv流媒体服务器》
http://www.yanghengfei.com/archives/475/
2 播放的flv/mp4有完整的mete信息,其中包括视频分辨率、帧率等信息。有相应的软件对一般的flv上添加这样的标记信息,添加后的也支持一般的应用,而且数据量增加不多
参考文章《x264编码器参数完整对照表》
http://www.php-oa.com/2009/03/09/ffmpeg_x264.html
3 客户端允许发生请求流式播放的请求,并且能够处理获取的流式数据,从随机点开始播放。
如jwplayer支持播放http流媒体。
参考文章《JW Player使用简介》
http://j-coriolanus.blog.163.com/blog/static/64211038200992011745532/
参考文章《基于nginx+jwplayer的flv流媒体》
http://www.iinuu.eu/en/it-guru/flv-streaming-using-nginx-and-jw-player-5-1
首先配置nginx服务支持flv模块功能
⑴查看你的nginx是否已支持flv功能模块
[root@localhost ~]# /usr/local/nginx/sbin/nginx -V //查看nginx服务支持
结果:
nginx version: nginx/0.8.24
built by gcc 4.4.4 20100726 (Red Hat 4.4.4-13) (GCC)
configure arguments: --prefix=/usr/local/nginx --with-http_flv_module --with-http_gzip_static_module --with-http_stub_status_module
分析:我的nginx版本0.8.24,http_flv_module已经开启,支持flv服务。
⑵安装支持flv模块的nginx服务器:
#tar zxvf nginx-0.8.24.tar.gz
#cd nginx-0.8.24
#./configure --prefix=/usr/local/nginx --with-http_flv_module --with-http_gzip_static_module --with-http_stub_status_module //开启flv模块
#make && make install
#/usr/local/nginx/sbin/nginx //启Nginx
⑶nginx服务器配置(nginx.conf文件)
server
{
listen 80;
server_name localhost;
charset utf-8;
location / {
root html;
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 模块 所以是支持的。
在使用jwplayer播放视频,并进行跳转时,会赂nginx服务器发起请求,类似
"GET /video.flv?start=27503944 HTTP/1.1" 200 1752013"
"GET /video.flv?start=88336188 HTTP/1.1" 200 13564873"
⑸添加关键帧
如果一个Flv视频要能够被拖到特定点播放,该Flv需要在其metadata中有关键帧的信息。
使用mencoder转换成的flv视频默认每250帧加入一个关键帧。
如果你的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 //原视频 输出视频
补充
通过使用nginx-rtmp-module https://github.com/arut/nginx-rtmp-module 来增加对HLS的支持;
nginx-rtmp-module 本身也支持RTMP协议,从而也可以基于nginx来搭建在线直播系统。
视频支持拖动进度条播放的实现(基于nginx)的更多相关文章
- Android——音乐播放器完善——进度条显示当前播放进度,加可拖动进度条(未待解决完问题)
效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?&g ...
- [Android] SeekBar---可拖动进度条
SeekBar---可拖动进度条 ()setMax //设置SeekBar最大数值 ()setProgress //设置SeekBar当前数值 ()setSecondaryProgress//设置Se ...
- UISlider无法拖动进度条的问题解决
UISlider无法拖动进度条的问题解决 最近业务中的视频播放使用到了UISlider,但是有一个奇怪的问题,就是在Modar出来的控制器中UISlider是可以正常使用的,但是在Push出来的控制器 ...
- android中SeekBar拖动进度条的使用及事件监听
下面和大家分享一下android中SeekBar拖动进度条的使用,以及事件监听.拖动进度条的事件监听需要实现SeekBar.OnSeekBarChangeListener接口,调用SeekBar的se ...
- Html5中 视频 音频标签 进度条问题
最近项目中使用Html5的video和audio标签来在线播放视频和音频文件,但是遇到个奇葩的问题,页面上播放之后进度条无效, 查看w3c之后发现html代码并没有什么不同,之后猜想如果用静态的htm ...
- canvas-弧形可拖动进度条
一.效果如下: See the Pen XRmNRK by pangyongsheng (@pangyongsheng) on CodePen. 链接dome 二. 本文是实现可拖动滑块实现的基本,及 ...
- canvas-圆弧形可拖动进度条
一.效果如下: See the Pen XRmNRK by pangyongsheng (@pangyongsheng) on CodePen. 链接dome 二. 本文是实现可拖动滑块实现的基本思路 ...
- Jquery实现可拖动进度条demo
html <div class="progress"> <div class="progress_bg"> <div class= ...
- 基于<MediaElement>的WPF视频播放器(可拖拽进度条播放)【1】
一.前言 前两天上峰要求做一个软件使用向导,使用WPF制作.这不,这两天从一张白纸开始学起,做一个播放演示视频的使用向导.以下是粗设计的原型代码: 二.效果图 三.代码 前台代码: < ...
随机推荐
- POJ 3436 ACM Computer Factory(最大流+路径输出)
http://poj.org/problem?id=3436 题意: 每台计算机包含P个部件,当所有这些部件都准备齐全后,计算机就组装完成了.计算机的生产过程通过N台不同的机器来完成,每台机器用它的性 ...
- TCGA三个在线可视化网站
1.>c-Bioportal: www.cbioportal.org 整合和简化了包括TCGA,ICGC以及GEO等多个癌症基因组数据库的内容,提供友好可视化的界面,可供下载. 主要展示基因的s ...
- Android多个Module统一配置相同jar或库的版本号
Android Studio多个Module依赖相同的库时对版本号进行统一配置 在Android项目中,一个项目经常会依赖其他的一个甚至多个库文件,在这种依赖的时候最常见的一个错误就是 jar包版本不 ...
- 《图解Http》 2-6章: 基础,报文,状态码,首部。
HTTP协议和Cookie 是stateless协议,自身不对请求和响应之间的通信状态进行保存.但随着技术发展,为了实现保存状态的功能,引入了Cookie技术. Cookie在请求和响应报文中写入信息 ...
- android------引导页两种实现方式(原生和WebView网页实现)
有的App当你第一次打开的是和常常会有引导页来描述一些App信息(功能,特点),当然也要做验证,验证第二次进入不进入引导页,直接进入App,此博客借助ViewPager来实现引导页, ViewPage ...
- 2-15-MySQL进阶
select select 字段列表 from 数据表 [[as] 别名] [where 条件] 别名: 数据表 [[as] 别名] select AA.money,BB.name from prod ...
- js 文件系统API操作示例
最近有个需求是:自动抓取某网站登录页面的验证码图片并保存,抓取n次.使用chrome插件来实现,其中使用到了js操作文件系统的api,特将代码记录下来,以备查阅. PS:第一次使用js文件系统的api ...
- recv,recvfrom,send,sendto
一般情况下:send(),recv()用于TCP,sendto()及recvfrom()用于UDP 但是send(),recv()也可以用于UDP,sendto()及recvfrom()也可以用于TC ...
- C#接口作用
1.C#接口的作用 : C#接口是一个让很多初学C#者容易迷糊的东西,用起来好像很简单,定义接口,里面包含方法,但没有方法具体实现的代码,然后在继承该接口的类里面要实现接口的所有方法的代码,但没有真正 ...
- 在EORow或者VORow中对数据进行重复性校验
需求:在设置付款条件时不允许账期+付款方式重复. 由于本次需求仅需要对VO缓存中的数据进行重复性校验,所以仅需进行缓存遍历即可,不需要校验数据库. 方式1,在EORow的进行数据校验. public ...