nginx搭建支持http和rtmp协议的流媒体服务器之二

三、配置Nginx，实现VOD，以HTTP方式播放MP4、FLV，实现进度条可拖动
1. 设置configure，nginx的补充编译，增加FLV和MP4功能。
# cd cd nginx-1.6.0 
# vim nginx_configure.sh
#!/bin/sh

echo "configure start ..."
./configure --prefix=/opt/nginx \
--add-module=../nginx_mod_h264_streaming-2.2.7 \
--with-http_flv_module \
--with-http_ssl_module \
--with-http_mp4_module \
--with-http_gzip_static_module \
--with-http_stub_status_module \
--with-pcre=/opt/nginx_http_rtmp/pcre-8.12 \
--with-zlib=/opt/nginx_http_rtmp/soft_source/zlib-1.2.8 \
--user=www --group=www \
--add-module=../nginx-rtmp-module \
--with-cc-opt=-I/opt/ffmpeg/include \
--with-ld-opt=`-L/opt/ffmpeg/lib -Wl, -rpath=/opt/ffmpeg/lib`
echo "configure end!"
【保存并退出】
# chmod +x nginx_configure.sh
# ./nginx_configure.sh
# make && make install

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

2. conf/nginx.conf 支持
# vim conf/nginx.conf
【编辑nginx.conf】
#user  www www;
worker_processes  4;
error_log  logs/error.log  info;
pid        logs/nginx.pid;

worker_rlimit_nofile 51200;
events
{
  use epoll;
  worker_connections  51200;
}

http
{
  include                       mime.types;
  default_type                  application/octet-stream;

  server_names_hash_bucket_size 128;
  client_header_buffer_size     32k;
  large_client_header_buffers   4 32k;

  client_max_body_size          50m;
  limit_conn_zone $binary_remote_addr zone=perip:256k;
  limit_conn_log_level notice;

  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

  sendfile        on;
  tcp_nopush      on;

  keepalive_timeout  65;
  tcp_nodelay on;

  gzip  on;
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  gzip_http_version 1.0;
  gzip_comp_level 2;
  gzip_types text/plain application/x-javascript text/css application/xml;
  gzip_vary on;

  server
  {
    listen   8000;
    server_name localhost;

    location /
    {
      index  index.html;
      root /opt/pub/media/nginx;
      uwsgi_pass 127.0.0.1:9000;
      include uwsgi_params;
      limit_rate_after 50m;
      limit_rate       1m;
      uwsgi_param  UWSGI_CHDIR /opt/pub/media/nginx;
      uwsgi_param  UWSGI_SCRIPT apprun;
      location ~ \.flv$
      {
        flv;
      }
      location ~ \.mp4$
      {
        mp4;
      }
    }
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css)$
    {
      root /opt/pub/media/nginx;
      break;
    }
  }
}
【保存并退出】
NOTE: 
flv和mp4的location要写在上面目录location的里面，不然可能会有权限问题。
limit_rate_after，是说文件下载了5M以后才限速到limit_rate=512K;

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去掉。
或从这里下载:
  http://blogimg.chinaunix.net/blog/upfile2/100607142612.rar 下载下来的zip包，将plyaer.swf和video.mp4 直接放到
/opt/pub/media/nginx目录下或者
index.html同级目录下，即/usr/local/nginx/html/下，(我测试没有通过，不知道为什么)，
启动nginx：
# /usr/local/nginx/sbin/nginx

在浏览器中输入: http://192.168.1.106:8000/player.swf?type=http&file=video.mp4 
方式二: 使用去水印版本
也可以下个去水印，去版权版本的，如： http://hi.baidu.com/tuberose1605/item/a09f271cd26ee90eb88a1a72 将解码后的文件放在:
/opt/pub/media/nginx/web 下；
将播放素材放在:
/opt/pub/media/nginx/vod 下；
在浏览器中输入: http://10.2.175.10:8000/web/pl.swf?type=http&file=/vod/video.flv
4. HTML页面嵌入播放器模式
用chrome审查元素，观察network，你发现当你seek时，是会请求一个新流过来的，这个实际上已经相当于实时流媒体了。
因为普通http+mp4(flv)方式下，这个视频文件没有完全下载下来之前，你是无法拖动到后面的（后面没有下载的地方），
因此nginx这种方式称为http 伪流媒体（HTTP Pseudo-Streaming），参考jwplayer官方网站中关于这个伪流媒体概念的介绍。

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

  
  

  

    

    

    

    

    <embed

      type="application/x-shockwave-flash"

      id="player2"

      name="player2"

      src="jwplayer_5_7_delogo/pl.swf" 

      width="400" 

      height="315"

      allowscriptaccess="always" 

      allowfullscreen="true"

      flashvars="file=/vod/video.flv&image=jwplayer_5_7_delogo/preview.jpg" 

    />

  
  

将此HTML代码（假设文件名为player.html）放到web目录下，
在web目录下新建jwplayer_5_7_delogo目录，将jwplayer.js，player.swf放在此目录下。
在web目录下新建vod目录，将video.flv放在vod目录下；

STEP2. 修改nginx.conf
在原有的配置上增加一个监听80端口的虚机:
【nginx.conf】
...
http 
{
  server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
      #root   html;
      root /opt/pub/media/nginx/web;
      index  index.html index.htm;
    }
  }
  ...
}
【保存并退出】

STEP3. reload nginx 
然后输入以下代码: http://192.168.1.106/player.html 这个时候，你看到的是一个带有宽和高的swf初始页面,当然你可以写更多的css代码来美化; 

原文链接：http://blog.chinaunix.net/uid-26000296-id-4335079.html