zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    2015生命之旅---第三站象山之行
    我的八年程序之路(四)程序路上的新起点
    2015生命之旅---第二站长沙杭州
    2015生命之旅---第一站重庆
    我的八年程序之路(三)为了理想放弃高薪
    锋友分享:国行和非国行iPhone的送修需知
    iPhone被盗后续更新二:被换机!已取机!没扣住新机!怎么找新机呢?事发半年后跟进...
    iPhone被盗后续更新一:怎么找老机
    iPhone被盗后怎么?这篇文章只办针对iOS7后的系统
    四个小诀窍 告诉你雪景怎么拍才能更好看
  • 原文地址:https://www.cnblogs.com/latma/p/4194024.html
Copyright © 2011-2022 走看看