Nginx+jwPlay搭建流媒体服务器，记忆播放

1.具体的流媒体服务器的搭建参考博客：

http://blog.chinaunix.net/uid-20639775-id-154556.html

具体可能编译的时候有个地方报错

 

/root/nginx_mod_h264_streaming-2.2.7/src/ngx_http_streaming_module.c: In function ‘ngx_streaming_handler’:

/root/nginx_mod_h264_streaming-2.2.7/src/ngx_http_streaming_module.c:158: error: ‘ngx_http_request_t’ has no member named ‘zero_in_uri’

make[1]: *** [objs/addon/src/ngx_http_h264_streaming_module.o] Error 1

 make[1]: Leaving directory `/root/nginx-0.8.54'

make: *** [build] Error 2

，需要注释或者删除一个地方

将src/ngx_http_streaming_module.c文件中以下代码删除或者是注释掉就可以了：

 

/* TODO: Win32 */

if (r->zero_in_uri)

{

return NGX_DECLINED;

}

2.然后就是jw_player的使用，我们先了解下jw_Player的预留js的回调函数

 

 var player = jwplayer("mediaplayer").setup({

            flashplayer: "player.swf",
            file: 'http://localhost/222.mp4',
            autostart: "true",
            bufferlength: '20',
            width: '400',
            height: '400',
            image: '111.jpg',
            events: {
                onComplete: function () { console.log("播放结束!!!"); },
                onVolume: function () { console.log("声音大小改变!!!"); },
                onReady: function () { console.log("准备就绪!!!"); },
                onPlay: function () { console.log("开始播放!!!"); },
                onPause: function () { console.log("暂停!!!"); },
                onBufferChange: function () { console.log("缓冲改变!!!"); },
                onBufferFull: function () { console.log("视频缓冲完成!!!"); },
                onError: function (obj) { console.log("播放器出错!!!" + obj.message); },
                onFullscreen: function (obj) { if (obj.fullscreen) { console.log("全屏"); } else { console.log("非全屏"); } },
                onMute: function (obj) { console.log("静音/取消静音") }
            }
        });

其他js回调函数

player.onBufferChange(function () { alert("缓冲改变!!!"); });
        player.onBufferFull(function () { alert("视频缓冲完成!!!"); });
        player.onError(function (obj) { alert("播放器出错!!!" + obj.message); })
        player.onFullscreen(function (obj) {
            if (obj.fullscreen) { alert("全屏"); }
            else { alert("非全屏"); }
        });
        player.onMute(function (obj) { }) // obj. mute是否静音
        player.onPlaylist(function (obj) { //视频列表载入完成
            alert(obj.playlist[0]['file']);
        });
        var callback = function () { alert("callback");};//定义一个回调方法
        player.onPlaylistItem(callback) // 开始播放一个视频时触发obj.index为视频索引
        player.onReady(callback) //准备就绪
        player.onResize(callback) //obj.width obj.height  宽高
        //进入播放时触发obj.oldstate 值：从BUFFERING PAUSE状态进入播放状态
        player.onPlay(callback)
        //进入暂停obj.oldstate 值1：从PLAYING BUFFERING状态进入暂停
        player.onPause(callback)
        player.onBuffer(callback) //进入加载obj.oldstate 值PLAYING, PAUSED or IDLE
        player.onIdle(callback) //进入空闲obj.oldstate 值PLAYING, PAUSED or BUFFERING.
        player.onComplete(callback) //结束播放
        player.onVolume(callback) //obj.volume
        player.onPlay(function () {
            console.log(this.getPosition());
        });

参考这个大叔的博客:http://www.cnblogs.com/lori/archive/2014/05/05/3709459.html

 

3.具体将jw_Player嵌套到页面，然后将播放进度存入cookie实现记忆播放。

   thePlayer = jwplayer( 'container').setup({

                flashplayer: '${pageContext.request.contextPath}/player/player.swf' ,

                 file: " http://192.168.0.11:8888/123456.flv",             

//                    这个是你nginx搭建的流媒体服务器视频播放的地址

                width: 720,

                height: 405,

                dock: false,

                controls: false, //显示控件按钮

                bufferlength:5,

                autostart: true,//是否开始自动播放

                stretching : 'fill', 

                streamer: "start", //这俩行必须要写，这样才能随时跳转，实现伪流的功能,要不不能实现在缓冲数据后面进行拖拽。如果不能随意拖拽进度条，说明你得nginx伪流搭建不成功

                provider: "http"

   });

   

 //判断状态播放的时候跳转到上次播放地址，然后停止,sectionId是我视频的编号

            var timer1=setInterval( function(){

                 var state = thePlayer.getState();

                      if(state== 'PLAYING'){         

                          thePlayer.seek(thePlayer.getDuration()*parseInt(  $.cookie($("#sectionId").text()+"sectionTime"))/100);

                           clearInterval(timer1);

                     }               

            },1000);

//             暂停状态就纪录暂停时间，停止状态就不做任何操作，播放状态就定时获取播放时间，然后存cookie后，关闭浏览器提交cookie中的数据。

            setInterval( function(){

//获取状态

                 var state = thePlayer.getState();

                 switch(state){

                 case 'BUFFERING': //加载

                     break;

                 case 'PLAYING': //正在播放

//thePlayer.getPosition() 获取当年播放时间，thePlayer.getDuration()获取视频的总时长             $.cookie($("#sectionId").text()+"sectionTime" ,parseInt((thePlayer.getPosition()/thePlayer.getDuration())*100));

                     break;

                 case 'PAUSED': //暂停

                      $.cookie($("#sectionId").text()+"sectionTime" ,parseInt((thePlayer.getPosition()/thePlayer.getDuration())*100));

                     break;

                 case 'IDLE': //停止

                     break;

                }

            },1000);

 

//上面是js轮询的方式获取播放时间，当然你也可以存到数据库，这样换个电脑还能记忆播放。你还可以使用js的

 $(window).bind('beforeunload',function(){

//获取时间存入cookie
            //这个关闭页面或者刷新的时候获取视频的播放进度存入cookie，，如果切换视频，但是无网页刷新的话，是不能记忆的，具体场景具体实现。
            });