Chinaunix首页 | 论坛 | 博客
  • 博客访问: 8648
  • 博文数量: 4
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 12
  • 用 户 组: 普通用户
  • 注册时间: 2015-05-29 09:24
个人简介

学不完的知识,做不完的事!

文章分类

全部博文(4)

文章存档

2015年(4)

我的朋友

分类: 网络与安全

2015-05-29 09:31:47

三、配置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第一版用的就是它。
方式一: 使用官方版本
下载地址在: 
 
下载时把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

在浏览器中输入:


方式二: 使用去水印版本
也可以下个去水印,去版权版本的,如:

将解码后的文件放在:
/opt/pub/media/nginx/web 下;
将播放素材放在:
/opt/pub/media/nginx/vod 下;
在浏览器中输入:


4. HTML页面嵌入播放器模式
用chrome审查元素,观察network,你发现当你seek时,是会请求一个新流过来的,这个实际上已经相当于实时流媒体了。
因为普通http+mp4(flv)方式下,这个视频文件没有完全下载下来之前,你是无法拖动到后面的(后面没有下载的地方),
因此nginx这种方式称为http 伪流媒体(HTTP Pseudo-Streaming),参考jwplayer官方网站中关于这个伪流媒体概念的介绍。

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



  JW Player for Flash
 



 
   
   
   
   
          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 
然后输入以下代码:

这个时候,你看到的是一个带有宽和高的swf初始页面,当然你可以写更多的css代码来美化; 
阅读(951) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~