转载自：http://blog.csdn.net/cjsafty/article/details/7892392

目前，由于Flash的流行，网络上绝大多数的微视频网站都采用了Flv格式来播放视频。

在互联网上播放视频，有两种方式，一种是文件方式，即通过HTTP协议访问视频文件，这种方式的缺点是不能从特定的帧开始播放，或者说要下载到本地才能实现seek动作，为了使得seek更加人性化，许多CP采用了对视频文件分片的技术来缓解。例如youku，tudou等国内CP基本都是这么做，包括youtube也是这么做；另外一种就是采用专门的流媒体服务器，例如闭源的adobe
的FMS（flash media server，功能强大，可支持RTMP，HLS，HTTP）和开源的red5,可实现随意seek,这种方式的缺点是要搭建复杂的流媒体服务器,并且fms要收取licence费用。不过，现在有了第三种方式:一种集合了以上两种方式优点的一种解决方案，即通过HTTP来实现伪流媒体(既可以实现任意seek,seek后的媒体流又只提供单纯下载)。本文描述的就是这样的一种解决方案。

注：apple独创的HLS方案是HTTP+TS分片方案。理论山也应该归属第一种方式，只是apple分片分的好，比如有一个profile配置文件，能够根据网络状况自适应选择对应质量的视频文件，保证播放的平滑性。

jwplayer，nginx，webpy，uwsgi的基本知识这里不介绍，只介绍本文应用如何实现。

注：许多博客提到要用yamdi 给媒体文件单独添加关键帧到metadata，因为我用ffmpeg生成的文件已经有了这个信息，所以本文不提这个。

1，nginx补充编译，增加FLV和MP4功能。

[plain] view
plaincopy

  1. ./configure --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_ssl_module --with-http_flv_module --with-http_gzip_static_module --with-http_mp4_module
  2. make && make install

http_flv_module和http_mp4_module即为对应的解析和seek功能支持。

2,conf/nginx.conf支持

[plain] view
plaincopy

  1. http{
  2. include       mime.types;
  3. default_type  application/octet-stream;
  4. sendfile        on;
  5. keepalive_timeout  65;
  6. server {
  7. listen       8000;
  8. server_name  localhost;
  9. location / {
  10. root   /home/webapp;
  11. uwsgi_pass 127.0.0.1:9000;
  12. include uwsgi_params;
  13. limit_rate_after 1m;
  14. limit_rate 100K;
  15. index  index.html index.htm;
  16. uwsgi_param UWSGI_CHDIR /home/webapp;
  17. uwsgi_param UWSGI_SCRIPT apprun;
  18. location ~ \.flv$ {
  19. flv;
  20. }
  21. location ~ \.mp4${
  22. mp4;
  23. }
  24. }
  25. location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css)$ {
  26. root /home/webapp;
  27. break;
  28. }
  29. }
  30. }

上面要注意一点：flv和mp4的location要写在上面目录location的里面，不然可能会有权限问题。

limit_rate_after，是说1M以后才限速到limit_rate=100K;

3,下载jwplayer，这个开源代码用的比较广，据说youtube第一版用的就是它。地址在

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/15991/getting-started

下载时把Keep me informed of news, offers & updates和Include Viral, a video sharing plugin去掉。

但是jwplayer的水印还是去不掉，这个另有办法，这里不说。

下载下来的zip包，将plyaer.swf和video.mp4直接丢到webapp目录下或者index目录下，启动nginx，输入

[plain] view
plaincopy

  1. http://192.168.1.106:8000/player.swf?type=http&file=video.mp4

用chrome审查元素，观察network，你发现当你seek时，是会请求一个新流过来的，这个实际上已经相当于实时流媒体了。因为普通http+mp4(flv)方式下，这个视频

文件没有完全下载下来之前，你是无法拖动到后面的（后面没有下载的地方），因此nginx这种方式称为http 伪流媒体（HTTP Pseudo-Streaming），参考jwplayer官方网站

中关于这个伪流媒体概念的介绍。

但是这个地址的输入太死板了，你在浏览器中看到的是一个全屏幕的SWF播放器界面。如何在HTML中定制呢？参考以下HTML代码

[html] view
plaincopy

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/static/jwplayer.js"></script>
  4. </head>
  5. <body>
  6. <div id="container">Loading the player ...</div>
  7. <script type="text/javascript">
  8. jwplayer("container").setup({
  9. flashplayer: "/static/player.swf",
  10. file: "/static/video.mp4",
  11. height: 622,
  12. width:1104,
  13. stretching : 'fill',
  14. streamer:"start",
  15. provider:"http",
  16. });
  17. </script>
  18. </body>
  19. </html>

上文中：provider和streamer是关键词。如果将此关键词去掉，你得到的仅仅是普通http+mp4功能，没有seek功能

将此HTML代码（假设文件名为Index.html）丢到和webapp或者index目录下，新建static目录，将jwplayer.js，player.swf以及video.mp4放在此目录下。

reload nginx ,然后输入以下代码

[plain] view
plaincopy

  1. http://192.168.1.106:8000/index

这个时候，你看到的是一个带有宽和高的swf初始页面。当然你可以写更多的css代码来美化。这个是另一个话题

4，UWSGI+WEBPY

上述ip输入方式仍然不够方便。我想拥有一个简单易行的网页渲染系统，那么就采用uwsgi+webpy这种方式代替nginx自身的html渲染。

通用部署见我的另一篇博客。这里针对这个应用举例

项目处于/home/webapp目录下，此目录下依次为apprun.py, template文件夹（用于存放index.html代码文件），static文件夹（用于存放js，swf，mp4等静态文件），

apprun.py代码如下

[plain] view
plaincopy

  1. import psycopg2
  2. import web
  3. import codecs
  4. urls=(
  5. '/','index'
  6. )
  7. render = web.template.render('template/')
  8. app = web.application(urls, globals())
  9. class index:
  10. def GET(self):
  11. return render.index();
  12. if __name__ == "__main__":
  13. print "everything from here"
  14. app.run()
  15. else :
  16. application = app.wsgifunc()

重启reload nginx。启动uwsgi，代码如下

[plain] view
plaincopy

  1. ./uwsgi -s 127.0.0.1:9000 -w apprun

浏览器输入

[plain] view
plaincopy

  1. http://192.168.1.106:8000

此时你是通过webpy页面渲染播放的流媒体。媒体文件和css，js文件一样，都属于静态文件，通过nginx提供server，

当然，你可以通过webpy框架，将页面做的美观一些，这个是另一个话题。

注：不经过nginx,直接输入python  apprun.py ，同样可以访问播放，但是此时用的是普通Http方式，不支持seek。

参考博客：

jw player 流媒体拖曳不成功的问题——nginx在支持flv方面不能用代理

http://blog.csdn.net/leidengyan/article/details/7576328





 Nginx下搭建flv视频服务器且支持视频拖动进度条播放

http://blog.csdn.net/youacai/article/details/6728013





HLS流媒体与其他方式的比较

http://issuu.com/andruby/docs/http_live_streaming_presentatino#download





jwplayer官方网站

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/15991/getting-started

nginx+webpy+uswgi+jwplayer组合搭建流媒体服务器的更多相关文章

  1. Ubuntu下使用nginx和nginx-rtmp-module搭建流媒体服务器的正确姿势

    之前在使用nginx和nginx-rtmp-module搭建流媒体服务器的时候遇到一个很尴尬的问题,就是在把nginx-rtmp-module模块添加到nginx中去的时候,我最开始采取的做法是先卸载 ...

  2. nginx + rtmp 搭建流媒体服务器

    一.安装nginx服务器 1.路径说明: 路径:/usr/local/src 2.下载nginx-rtmp-module (我这里的目录是在/usr/local/src/下面) cd /usr/loc ...

  3. centos7+nginx+rtmp+ffmpeg搭建流媒体服务器(保存流目录与http目录不要随意配置，否则有权限问题)

    搭建nginx-http-flv-module升级代替rtmp模块,详情:https://github.com/winshining/nginx-http-flv-module/blob/master ...

  4. 使用nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器

    参考: 1,使用nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器笔记(一)http://blog.csdn.net/xdwyyan/article/details/4319 ...

  5. nginx的rtmp搭建流媒体服务器实现直播流

    最近自己搞了一个用nginx的rtmp来搭建流媒体服务器,从而实现直播的过程,参考了网上很多资料,有些资料对于初学者来说比较难以理解,在此将我搭建的过程记录下来,分享给大家. 1.下载nginx-rt ...

  6. Linux-Nginx+rtmp+ffmpeg搭建流媒体服务器

    Nginx+rtmp+ffmpeg搭建流媒体服务器 说明: nginx搭建流媒体服务需要用到 nginx-rtmp-module 模块 具体操作步骤: 安装nginx (1)下载第三方扩展模块ngin ...

  7. obs nginx-rtmp-module搭建流媒体服务器实现直播 ding

    接下来我就简单跟大家介绍一下利用nginx来搭建流媒体服务器. 我选择的是腾讯云服务器 1.下载nginx-rtmp-module: nginx-rtmp-module的官方github地址:http ...

  8. 使用 Live555 搭建流媒体服务器

    最近因为工作需要,需要搭建流媒体服务器,所以研究了一下,在此分享我的搭建过程. 搭建过程还是非常简单的! 搭建环境为Centos 7.2 64bit 一.安装gcc编译器 yum install gc ...

  9. Linux 下搭建流媒体服务器

    http://blog.csdn.net/huangtaishuai/article/details/9836581 ----------------------------------------- ...

随机推荐

  1. Java：static的作用分析

    static表示“静态”或者“全局”的意思,但在Java中不能在所有类之外定义全局变量,只能通过在一个类中定义公用.静态的变量来实现一个全局变量. 一.静态变量 1. Java中存在两种变量,一种是s ...

  2. 大数据培训班 cloudera公司讲师面对面授课 CCDH CCAH CCP

    大数据助力成就非凡.大数据正在改变着商业游戏规则,为企业解决传统业务问题带来变革的机遇.毫无疑问,当未来企业尝试分析现有海量信息以推动业务价值增值时,必定会采用大数据技术. 目前对大数据的分析工具,首 ...

  3. 根据生产场景对Linux系统进行分区

    转自:http://oldboy.blog.51cto.com/2561410/629558 老鸟谈生产场景如何对linux系统进行分区? █  前言:    我们买房子时,会考虑1室1厅,2室1厅, ...

  4. NetBeans集成SVN代码管理实例

    最近给银行做一个小工具,要求用Java做一个C端带界面的小工具,想来想去用NetBeans最合适,因为Eclipse,MyEclipse,IDEA这些做界面得要额外的UI插件,比较麻烦. 我跟同事两个 ...

  5. LR创建数据源读取excel

    1 在window上创建数据源   2 创建对应的数据文件 excel 注:注意格式和底部的表单名称 3 Vegen中创建参数 注意:机器数据源选择windows的ODBC数据源 SQL查的是(she ...

  6. ORM选型对比

    ORM框架选型 ORM框架选型 jian A YEAR AGO (2017-04-10) orm, database 选型标准:实现O/R mapping,基于promise,支持原生SQL语句,支持 ...

  7. jira+mysql+破解+中文+compose

    1.制作docker-compose.yml 2.安装 $ docker stack deploy -c docker-compose.yml mshk_jira

  8. ExtJS6.0扩展日期选择控件为也可以选择时间

    PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6. ...

  9. Android隐藏键盘

    今天接到的任务是在验证码输入框中加入键盘监听事件,需要点击Enter实现登录,这个比较好实现,但是在登录时,键盘并没有隐藏掉,看上去很别扭,因此,百度了一堆方法,但是都无济于事,最后找到了一个,如下, ...

  10. LTE 中基于X2的切换

    LTE 中基于X2的切换 (36.300, 23.401)SGW  保持不变 http://blog.sina.com.cn/s/blog_673b30dd0100j4pe.html   1:eNod ...