三、配置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
将此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代码来美化;