码迷,mamicode.com
首页 > 其他好文 > 详细

jw player+nginx搭配流媒体播放器

时间:2014-12-30 18:28:50      阅读:685      评论:0      收藏:0      [点我收藏+]

标签:

环境: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搭配流媒体播放器

标签:

原文地址:http://www.cnblogs.com/latma/p/4194024.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!