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代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JW Player for Flash</title>
<style type="text/css">
body { background-color: #fff; padding: 0 20px; color:#000; font: 13px/18px Arial, sans-serif; }
a { color: #360; }
h3 { padding-top: 20px; }
ol { margin:5px 0 15px 16px; padding:0; list-style-type:square; }
</style>
</head>
<body>
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="400" height="315">
<param name="movie" value="jwplayer_5_7_delogo/pl.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=/vod/video.flv&image=jwplayer_5_7_delogo/preview.jpg" />
<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"
/>
</object>
<!-- END OF THE PLAYER EMBEDDING -->
</body>
</html>
将此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代码来美化;
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代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JW Player for Flash</title>
<style type="text/css">
body { background-color: #fff; padding: 0 20px; color:#000; font: 13px/18px Arial, sans-serif; }
a { color: #360; }
h3 { padding-top: 20px; }
ol { margin:5px 0 15px 16px; padding:0; list-style-type:square; }
</style>
</head>
<body>
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="400" height="315">
<param name="movie" value="jwplayer_5_7_delogo/pl.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=/vod/video.flv&image=jwplayer_5_7_delogo/preview.jpg" />
<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"
/>
</object>
<!-- END OF THE PLAYER EMBEDDING -->
</body>
</html>
将此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代码来美化;