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)的更多相关文章

  1. Android——音乐播放器完善——进度条显示当前播放进度,加可拖动进度条(未待解决完问题)

    效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?&g ...

  2. [Android] SeekBar---可拖动进度条

    SeekBar---可拖动进度条 ()setMax //设置SeekBar最大数值 ()setProgress //设置SeekBar当前数值 ()setSecondaryProgress//设置Se ...

  3. UISlider无法拖动进度条的问题解决

    UISlider无法拖动进度条的问题解决 最近业务中的视频播放使用到了UISlider,但是有一个奇怪的问题,就是在Modar出来的控制器中UISlider是可以正常使用的,但是在Push出来的控制器 ...

  4. android中SeekBar拖动进度条的使用及事件监听

    下面和大家分享一下android中SeekBar拖动进度条的使用,以及事件监听.拖动进度条的事件监听需要实现SeekBar.OnSeekBarChangeListener接口,调用SeekBar的se ...

  5. Html5中 视频 音频标签 进度条问题

    最近项目中使用Html5的video和audio标签来在线播放视频和音频文件,但是遇到个奇葩的问题,页面上播放之后进度条无效, 查看w3c之后发现html代码并没有什么不同,之后猜想如果用静态的htm ...

  6. canvas-弧形可拖动进度条

    一.效果如下: See the Pen XRmNRK by pangyongsheng (@pangyongsheng) on CodePen. 链接dome 二. 本文是实现可拖动滑块实现的基本,及 ...

  7. canvas-圆弧形可拖动进度条

    一.效果如下: See the Pen XRmNRK by pangyongsheng (@pangyongsheng) on CodePen. 链接dome 二. 本文是实现可拖动滑块实现的基本思路 ...

  8. Jquery实现可拖动进度条demo

    html <div class="progress"> <div class="progress_bg"> <div class= ...

  9. 基于<MediaElement>的WPF视频播放器(可拖拽进度条播放)【1】

    一.前言       前两天上峰要求做一个软件使用向导,使用WPF制作.这不,这两天从一张白纸开始学起,做一个播放演示视频的使用向导.以下是粗设计的原型代码: 二.效果图 三.代码 前台代码: < ...

随机推荐

  1. bootstrap.min.css.map HTTP/1.1" 404 1699

    在做一个jsp练习的时候遇到引入bootstrap.css的时候出现了URL:bootstrap.min.css.map 404的错误. 解决办法:删除bootstrap.min.css文件内容最后一 ...

  2. poj1087最大流拆点

    刚开始看这题太长了就放着,后来做了之后才发现并不难,就是构造图有点麻烦 一开始写了180行@.@结果tle了,后来想到用map直接访问的话可能会快点,就不用每次循环了 #include<map& ...

  3. UVALive-2531 The K-League (最大流建模+枚举)

    题目大意:有n支足球队,已知每支球队的已胜场数和任意两支球队之间还需要的比赛场数a[i][j],求最终可能夺冠的所有球队. 题目分析:枚举所有的球队,对于球队 i 让它在接下来的比赛中全部获胜,如果这 ...

  4. c++ 中的 set

    set (集合) 中的元素是排序好的,而且是不重复的. 例题:hdu 4989 题目大意:求一组数列中任意两个不重复元素和,再求不重复和的和. #include <bits/stdc++.h&g ...

  5. 快速理解 FastCGI、PHP-CGI、PHP-FPM

    你(PHP)去和泰国人(web服务器,如 Apache.Nginx)谈生意 你说中文(PHP代码),他说泰语(C代码),互相听不懂,怎么办?那就都把各自说的话转换成英语(FastCGI 协议)吧. 怎 ...

  6. css之水平垂直居中方式

    布局中常用到的水平垂直居中问题 作为一个前端开发人员,布局是我们日常工作中解除最多的,而水平垂直居中也必不可少的出现,面试中也经常遇到噢- 一.position:absolute(固定宽高) widt ...

  7. History of programming language

    1940之前 第一个编程语言比现代的计算机还早诞生.首先,这种语言是种编码(en:code). 于1801年发明的提花织布机(或称甲卡提花织布机,英文:en:Jacquard loom),运用打孔卡上 ...

  8. bzoj2631

    题解: lct+链上修改 每一次修改的时候记录lazy标记 如果有了乘法,加法的lazy标记也要相应的随之变化 代码: #pragma GCC optimize(2) #include<bits ...

  9. Google Flutter框架:使用VS Code进行开发

    虽然进行安卓开发使用Android studio 比较方便 ,但是因为AS太臃肿而且还有一些404问题,就在打算如何进行高效的Android开发,于是找到了Flutter SDK, 他支持使用IDE进 ...

  10. Linux运维学习笔记-文件系统知识体系总结

    文件系统知识总结 新买的硬盘要存放数据需要怎么做? 首先将硬盘装机做RAID,做完RAID后进行分区,分完区后格式化创建文件系统,最后存放数据. 硬盘的内外部结构: 物理形状: 接口类型: IDE(I ...