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>

  • 相关阅读:
    Object-C,NSSet,不可变集合
    NYIST 860 又见01背包
    NYIST 1070 诡异的电梯【Ⅰ】
    HDU 1542 Atlantis
    HDU 4756 Install Air Conditioning
    CodeForces 362E Petya and Pipes
    HDU 4751 Divide Groups
    HDU 3081 Marriage Match II
    UVA 11404 Palindromic Subsequence
    UVALIVE 4256 Salesmen
  • 原文地址:https://www.cnblogs.com/latma/p/4194024.html
Copyright © 2011-2022 走看看