video视频开发(播放前,播放中,播放结束记录播放记录)

第一方式:视频播放

//视频点击控件播放触发
  playVideo.on('play',function(){
    $('.playTip').removeClass('glyphicon-play').addClass('glyphicon-pause').fadeOut();
    endedAjax(1,'');
  })
  //视频结束时候触发接口
  playVideo.on('ended',function(){
    $('.playTip').removeClass('glyphicon-pause').addClass('glyphicon-play').fadeIn();
    time_historical_time='';
    endedAjax(0,'')
  });
  //视频暂停时候触发接口保存播放历史
  playVideo.on('pause',function(){
    $('.playTip').removeClass('glyphicon-pause').addClass('glyphicon-play').fadeIn();
    var time=formatSeconds(playVideo[0].currentTime);
    time_historical_time='';
    if(playVideo[0].currentTime != playVideo[0].duration){
      endedAjax(0,time)
    }
    
  });
  //当目前的播放位置更改时候,进行浏览器关闭刷新保存播放历史
  //数据一直跳跃,
  //360刷新关闭浏览器正常
  //谷歌刷新关闭浏览器正常触发
  //IE刷新关闭浏览器正常触发
  //火狐刷新浏览器正常触发,关闭不触发
  playVideo.on('timeupdate',function(){
    time_historical_time=playVideo[0].currentTime;
    console.log(time_historical_time)
    window.onbeforeunload=function(event){
        if(time_historical_time != 0){
         if(!!window.ActiveXObject || "ActiveXObject" in window){
           var n = window.event.screenX - window.screenLeft;
           var b = n > document.documentElement.scrollWidth-20;
           if(b || window.event.clientY < 0 || window.event.altKey){
                endedAjax(0,formatSeconds(time_historical_time));
            }else{
             endedAjax(0,formatSeconds(time_historical_time));
          }
        }else if(navigator.userAgent.indexOf("Firefox")>-1){
          endedAjax(0,formatSeconds(time_historical_time));
        }else{
          endedAjax(0,formatSeconds(time_historical_time));
        }
      }
    }
    window.onunload = function(){
        if(time_historical_time != 0){
               if(navigator.userAgent.indexOf("Firefox")>-1){
                   if(document.documentElement.scrollWidth==0) {
                    endedAjax(0,formatSeconds(time_historical_time));
                    }else{
                    endedAjax(0,formatSeconds(time_historical_time));
                    } 
                }
            }
        }
    
  });
  //当用户拖动横条时触发
  playVideo.on('seeked',function(){
    $('.playTip').removeClass('glyphicon-play').addClass('glyphicon-pause').fadeOut();
  });
  playVideo.on('seeking',function(){
    $('.playTip').fadeOut();
  });
  function playControl(){
    if(playVideo[0].paused){
      playVideo[0].play();
      endedAjax(1,'')
      $('.playTip').removeClass('glyphicon-play').addClass('glyphicon-pause').fadeOut();
    }else{
      playVideo[0].pause();
      $('.playTip').removeClass('glyphicon-pause').addClass('glyphicon-play').fadeIn();
    }
  }

本地文件来自:http://svn.chenhua.cc/project/chuangke/index.html

线上效果为:http://www.wxeepp.com/index.php/Home/Education/detail?id=130(创业路发布项目)

 

posted @ 2018-10-19 11:02  chenguiya  阅读(672)  评论(0)    收藏  举报