首页 > 代码库 > jw player+nginx搭配流媒体播放器
jw player+nginx搭配流媒体播放器
环境:centos 6.5 64位+php 5.3.28+nginx 1.29
1.编译安装nginx时加上--with-http_mp4_module --with-http_flv_module这两个参数,开启FLV MP4支持
2.修改nginx配置文件
vi /usr/local/nginx/conf/nginx.conf
server
{
listen 80;
server_name www.abc.com abc.com;
index index.html index.htm index.php;
root /home/www/html;
limit_rate_after 5m;
limit_rate 512k;
location ~ .*\.(php|php5)?$
{
try_files $uri =404;
fastcgi_pass unix:/tmp/php-cgi.sock;
fastcgi_index index.php;
include fcgi.conf;
}
location ~ .*\.flv
{
flv;
}
location ~ .*\.mp4
{
mp4;
mp4_buffer_size 1m;
mp4_max_buffer_size 5m;
}
location /status {
stub_status on;
access_log off;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
}
location ~ .*\.(js|css)?$
{
expires 12h;
}
error_page 404 /404.html;
}
安装yamdi,对视频添加关键帧,添加完后可以拖动进度
yum -y install yamdi
使用方法:
yamdi -i 2.flv -o 4.flv #-i 是输入文件 -o是输出文件
设置jw player的相关参数,这里只设置了一部分,需要了解详细参数的请google
页面HTML代码:
<div id="mediaspace">正在加载视频……</div>
<div id="playerConfig"></div>
<div id="timex" style="display:none;"></div>
<div id="buffer"></div>
<div id="volume"></div>
<script type=‘text/javascript‘>
var cur_time = 0; //当前播放时间
var videoId = 1;//视频id,用来做cookie唯一
var strCookie = document.cookie; //获取当前COOKIE
var start_time = 0; //播放器开始播放时间
if(strCookie.indexOf(‘video_‘+videoId+‘=‘)!=-1){ //如果有记录上次播放时间,从上次记录的时间开始播放
start_time = getCookie(‘video_‘+videoId,strCookie); //获取上次播放时间
}
var so = new SWFObject(‘/jwplayer/playerdiy.swf‘,‘mpl‘,‘707‘,‘539‘,‘9‘);
so.addParam(‘allowfullscreen‘,‘true‘);
so.addParam(‘allowscriptaccess‘,‘always‘);
so.addParam(‘wmode‘,‘opaque‘);
so.addVariable(‘file‘,‘/flv/4.flv‘);
so.addVariable(‘frontcolor‘,‘444444‘);
so.addVariable(‘autostart‘,‘true‘);
so.addVariable(‘volume‘,‘100‘);
so.addVariable(‘playerready‘,‘playerReadyCallback‘);
//为本地预览环境特配代码
//alert(location.protocol);
if(location.protocol==‘http:‘)
{
//alert(‘yes‘);
so.addVariable(‘provider‘,‘http‘);
so.addVariable(‘http.startparam‘,‘start‘);
}
so.addVariable(‘start‘,start_time); //开始播放时间
so.write(‘mediaspace‘);
function getCookie(str,strCookie){
var arrCookie=strCookie.split("; ");
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
if(arr[0]==str)return arr[1];
}
}
//回调函数
function playerReadyCallback(obj) {
player = document.getElementById(obj[‘id‘]);
//showPlayerConfig(); //获取显示参数
player.addModelListener("TIME","showtime"); //播放时间监听器
//player.addModelListener("BUFFER","showbuffer"); //缓冲比率监听器
// player.addControllerListener("VOLUME","volumeTracker"); //音量监听
/* 监听器有:
addModelListener 对应 Model events
addControllerListener 对应 Sending Events api player.sendEvent
addViewListener 对应 Reading Variables api getConfig() getPlaylist().
removeModelListener()
removeControllerListener()
removeViewListener()
*/
};
//获取并显示参数
/*
var volume = player.getConfig().volume;
var width = player.getConfig().width;
var state = player.getConfig().state;
*/
function showPlayerConfig()
{
var playerConfig = player.getConfig();
var elem = document.createElement(‘DIV‘);
elem.innerHTML += ‘高度:‘ + playerConfig.height;
elem.innerHTML += ‘<br>宽度:‘ + playerConfig.width;
elem.innerHTML += ‘<br>音量:<div id="volume">‘ + playerConfig.volume+‘</div>‘;
document.getElementById(‘playerConfig‘).appendChild(elem);
}
//监听总时间和当前播放时间
function showtime(objs)
{
//每10秒记录一次播放时间
if((objs.position-10)>cur_time){
cur_time = objs.position;
document.cookie=‘video_‘+videoId+‘=‘+cur_time;//设置cookie
}
if( objs.position>=300){
player.sendEvent(‘STOP‘);//播放300秒后停止
}
document.getElementById(‘timex‘).innerHTML=objs.position +‘ / ‘ + objs.duration;
}
//监听缓冲率
function showbuffer(objs)
{
document.getElementById(‘buffer‘).innerHTML=objs.percentage +‘%‘;
}
//监听音量变化
function volumeTracker(objs)
{
document.getElementById(‘volume‘).innerHTML = objs.percentage;
}
</script>
jw player+nginx搭配流媒体播放器