zhkt/protected/viewc/video-play.php

<?php include Doo::conf()->SITE_PATH .  Doo::conf()->PROTECTED_FOLDER . "viewc//header.php"; ?>
<link href="//nos.netease.com/vod163/nep.min.css" rel="stylesheet">
<script src="//nos.netease.com/vod163/nep.min.js"></script>
<input type="hidden" name="class" value="<?php echo $data['classinfo']['classid']; ?>:<?php echo $data['uid']; ?>" id="time">
<input type="hidden" name="video" value="<?php if( isset($data['videoid']) && !empty($data['videoid']) ): ?><?php echo $data['videoid']; ?><?php endif; ?>" id="video">
<input type="hidden" name="wyvideo" value="<?php if( isset($data['wyvideoid']) && !empty($data['wyvideoid']) ): ?><?php echo $data['wyvideoid']; ?><?php endif; ?>" id="wyvideo">
<div class="mainWrap">
  <div class="width1000 mainInfo">
    <div class="classWrap">
      <div class="videoImg">
        <video id="my-video" class="video-js videoCon vjs-big-play-centered" controls poster="<?php echo $data['rootUrl']; ?>global/images/background.jpg" preload="auto" width="800" height="480" data-setup='{}'>
        </video>
        <div class="videoShadow" style="display: none;">
          <div class="videoShCon">
            <h3>恭喜学完本视频<label id="hasnvideo">，<span id="timeout">10</span>秒后自动切换下一节视频</label></h3>
            <p>下一视频内容：<span id="nextvideo">第一个HTML5网页概述</span></p>
            <div class="btnShWrap">
              <button class="btn btn-primary btn-lg active" role="button" onclick="" id="nextvideobtn">下一节</button>
              <button class="btn btn-default btn-lg active" role="button" onclick="resetvideo();">重新再看</button>
            </div>
          </div>
        </div>
        <div class="videoShadow2" style="display: none;" id="finishClass">
          <div class="videoShCon">
            <h3 style="width:100%; text-align:center;"><span class="glyphicon glyphicon-ok videoFinished"></span>恭喜您学完本课程</h3>
            <div class="btnShWrap">
              <button class="btn btn-default btn-lg active" role="button" onclick="continueVideo();">继续观看</button>
            </div>
          </div>
        </div>
      </div>
      <div class="classCon clearfix">
        <div class="classConVLeft fL">
          <h3><?php echo $data['classinfo']['classname']; ?></h3>
          <div class="classCVideo">
            <div class="classConLeftInfo"><span>总课时：<?php echo $data['classinfo']['classnum']; ?>课时（<?php echo $data['totalnum']; ?>小时）</span><i class="spl">|</i><span>学习进度：<span class="done_progress"><?php echo $data['user_progress']['progress']; ?></span>%（<span class="done_hh"><?php echo $data['user_progress']['donehh']; ?></span>小时）</span></div>
          </div>
        </div>
        <div class="classConVRight">
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="min-width: 30px;width:<?php echo $data['user_progress']['progress']; ?>%" data-toggle="tooltip" data-placement="bottom" title="累计在线上课：<?php echo $data['user_progress']['doneclassnum']; ?>课时" id="progresstar">
              <span class="done_progress"><?php echo $data['user_progress']['progress']; ?></span>%
            </div>
            <div class="progress-bar bar-gary" style="max-width:148px;width:<?php echo $data['user_progress']['noprogress']; ?>%;" id="noprogresstar">
              <span class="done_noprogress"><?php echo $data['user_progress']['noprogress']; ?></span>%
            </div>
          </div>
          <div class="classCVideo" style="text-align: center;">
            <div class="classConLeftInfo"><span id="classStatus"><?php if( $data['successClass'] == 1 ): ?>已完成本课程学习<?php else: ?>本次在线时长：<span id="dtime">00:00:00</span></span><?php endif; ?></div>
            <input type="hidden" name="lasttime" id="lasttime" value="0" />
            <input type="hidden" name="doness" id="doness" value="<?php echo $data['user_progress']['doness']; ?>" />
            <input type="hidden" name="totalss" id="totalss" value="<?php echo $data['user_progress']['totalss']; ?>" />
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="profile">
        <?php if( isset($data['kttype']) && !empty($data['kttype']) ): ?>
        <?php foreach($data['kttype'] as $k1=>$v1): ?>
        <div class="classList">
          <h4><span><?php echo $v1['typeprefix']; ?></span> <?php echo $v1['typename']; ?></h4>
          <?php if( isset($v1['section']) && !empty($v1['section']) ): ?>
          <?php foreach($v1['section'] as $k2=>$v2): ?>
          <dl class="classSection">
            <?php if( $v2['ishow'] == 1 ): ?><dt><?php echo $v2['seprefix']; ?> <?php echo $v2['sename']; ?></dt><?php endif; ?>
            <?php if( isset($v2['video']) && !empty($v2['video']) ): ?>
            <?php foreach($v2['video'] as $k3=>$v3): ?>
            <dd>
              <div id="video_<?php echo $v3['videoid']; ?>" class="classVideo<?php if( ($data['videoid'] == $v3['videoid']) ): ?> now<?php endif; ?>">
                <a href="javascript:;" onclick="playVideo('<?php echo $v3['wy_video_id']; ?>','<?php echo $v3['videoid']; ?>');"><?php if( ($data['videoid'] == $v3['videoid']) ): ?><i class="glyphicon glyphicon-play" style="display: inline-block"></i><?php else: ?><i class="glyphicon glyphicon-play" style="display: none"></i><?php endif; ?><?php echo $v3['videoname']; ?>.<?php echo $v3['file_ext']; ?>
                  <span class="classTime fR"><?php echo totime($v3['file_time']); ?></span>
                  <div class="btnClassGroup">
                    <button type="button" class="btn btn-success btnClass">立即播放</button>
                  </div>
                </a>
              </div>
            </dd>
            <?php endforeach; ?>
            <?php endif; ?>
          </dl>
          <?php endforeach; ?>
          <?php endif; ?>
        </div>
        <?php endforeach; ?>
        <?php endif; ?>
      </div>
    </div>
  </div>
</div>

<!-- 每隔10分钟弹出验证码框 -->
<div class="fade in" id="videoValidate" style="display: none;margin-left: -200px">
  <div class="val-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="warning">
          看累了，休息一下吧~
        </div>
      </div>
      <div class="val-footer">
        <button type="button" class="btn btn-primary btnGreen btnClose" data-dismiss="modal" onclick="starttimer();">继续观看</button>
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="fade in" id="videoTips" <?php if( $data['successClass'] == 1 ): ?>style="display:none;"<?php endif; ?>>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel"><strong>温馨提示</strong></h4>
      </div>
      <div class="modal-body">
        <div class="warning">
          <ul>
            <li>1.课程视频必须自动播放，不能快进；</li>
            <li>2.课程视频进行不能挂机行为；</li>
            <li>3.课程视频......</li>
          </ul>
          <div class="btnShWrap">
            <button class="btn btn-primary btn-lg btnGreen" onclick="startclass();">开始上课</button>
          </div>
        </div>
      </div>
      <!--<div class="modal-footer">-->
        <!--<button type="button" class="btn btn-default btnClose" data-dismiss="modal">关闭</button>-->
        <!--&lt;!&ndash; <button type="button" class="btn btn-primary">Save changes</button> &ndash;&gt;-->
      <!--</div>-->
    </div>
  </div>
</div>
<?php include Doo::conf()->SITE_PATH .  Doo::conf()->PROTECTED_FOLDER . "viewc//footer.php"; ?>
<div class="bodyBg" <?php if( $data['successClass'] == 1 ): ?>style="display:none;"<?php endif; ?>></div>
<script type="text/javascript" src="https://blueimp.github.io/JavaScript-MD5/js/md5.js"></script>
<script src="<?php echo $data['rootUrl']; ?>global/js/timer.js"></script>
<script>
  var myPlayer = neplayer('my-video');
  var totalnum = '<?php echo $data['totalnum']; ?>';
  var classid = '<?php echo $data['classinfo']['classid']; ?>';
  var videolist = '<?php echo trrep($data['videolist']); ?>';
  var videotype = '<?php echo $data['play_type']; ?>';
  var videosrc = '<?php echo $data['play_url']; ?>';
  var videotime = '<?php echo $data['play_time']; ?>';
  if('<?php echo $data['successClass']; ?>' == 1){
    myPlayer.setDataSource({type: videotype, src: videosrc});
    myPlayer.seekTo(parseInt(videotime)*1000);
    myPlayer.play();
  }
  videolist = eval('('+videolist+')');

  var timeout;
  //视频播放结束后弹出事件
  myPlayer.onPlayState(3,function(){
    $('#timeout').html(10);
    var thisvideo =$("#video").val();
    var hh =0;
    $.each(videolist,function(k,v){
      if(v.videoid == thisvideo){
        hh = k;
      }
    });
    if(videolist.length-1 == hh){
      $('#hasnvideo').hide();
      $('#nextvideo').text('');
      $("#nextvideobtn").attr('disabled',true);
      updatedata();
    }else{
      $('#hasnvideo').show();
      $('#nextvideo').text(videolist[hh+1]['videoname']);
      $("#nextvideobtn").attr('disabled',false);
      var videoid = videolist[hh+1]['videoid'];
      var video = videolist[hh+1]['wyvideoid'];
      $('#nextvideobtn').attr('onclick','playVideo('+video+','+videoid+');');
      timeout = setInterval(function(){run(video,videoid); }, 1000);
    }
    $(".videoShadow").show();
  });

  function run(video,videoid){
    var s = document.getElementById("timeout");
    if(s.innerHTML == 0){
      playVideo(video,videoid);
      return false;
    }
    s.innerHTML = s.innerHTML * 1 - 1;
  }

  function playVideo(video,videoid){
    clearInterval(timeout);
    $('dd div').removeClass('now');
    $('.glyphicon-play').hide();
    $('#video_'+videoid).addClass('now');
    $('#video_'+videoid+' a').children('i').show();
    $(".videoShadow").hide();
    myPlayer.pause();
    var nowtime = localStorage.getItem(md5($('#time').val())) || 0;
    var lasttime = $('#lasttime').val();
    var time = nowtime != 0 ? parseInt(nowtime) - parseInt(lasttime) : 0;
    var thisvideo = $('#video').val();
    var thiswyvideo = $('#wyvideo').val();
    var thisvideotime =parseInt(myPlayer.getCurrentPosition()/1000);
    var thisvideoduration = parseInt(myPlayer.getDuration()/1000);
    $('#video').val(videoid);
    $('#wyvideo').val(video);
    $('#lasttime').val(nowtime);
    localStorage.removeItem(md5($('#time').val()));
    $.ajax({
      type: 'post',
      url: '<?php echo $data['rootUrl']; ?>playVideo',
      data: {classid:'<?php echo $data['classinfo']['classid']; ?>', video:video, thisvideo:thisvideo, thiswyvideo:thiswyvideo, videotime:thisvideotime, seetime:time, duration:thisvideoduration},
      dataType: 'json',
      success: function(result){
        var data = result;
        if(data.code == 200){
          $('.done_progress').text(data.user_progress.progress);
          $('.done_noprogress').text(data.user_progress.noprogress);
          $('.done_hh').text(data.user_progress.donehh);
          $('#progresstar').attr('title','累计在线上课：'+data.user_progress.doneclassnum+'课时');
          $('#progresstar').css('width',data.user_progress.progress+'%');
          $('#noprogresstar').css('width',data.user_progress.noprogress+'%');
          myPlayer.setDataSource({type: data.type, src:data.url});
          myPlayer.seekTo(parseInt(data.seetime)*1000);
          myPlayer.play();
        }else{
          alert('播放源有问题，请联系客服');
        }
      }
    })
  }

  function resetvideo(){
    $(".videoShadow").hide();
    clearInterval(timeout);
    myPlayer.seekTo(0);
    myPlayer.play();
  }

  window.onunloadcancel = function()
  {
    myPlayer.play();
  }
  window.onbeforeunload = function(event) {
    myPlayer.pause();
    setTimeout(function(){setTimeout(onunloadcancel, 0)}, 0);
    updatedata();
    return false;
  }

  function updatedata(){
    var nowtime = localStorage.getItem(md5($('#time').val())) || 0;
    var lasttime = $('#lasttime').val();
    var time = nowtime != 0 ? parseInt(nowtime) - parseInt(lasttime) : 0;
    var video = $('#video').val();
    var wyvideo = $('#wyvideo').val();
    var videotime =parseInt(myPlayer.getCurrentPosition()/1000);
    var videoduration = parseInt(myPlayer.getDuration()/1000);
    $('#lasttime').val(nowtime);
    localStorage.removeItem(md5($('#time').val()));
    $.ajax({
      type: 'post',
      url: '<?php echo $data['rootUrl']; ?>updateClassAndVideo',
      data: {seetime:time,classid:'<?php echo $data['classinfo']['classid']; ?>',video:video,wyvideo:wyvideo,videotime:videotime,duration:videoduration},
      dataType: 'json',
      success: function(result){
        var data = result;
        $('.done_progress').text(data.user_progress.progress);
        $('.done_noprogress').text(data.user_progress.noprogress);
        $('.done_hh').text(data.user_progress.donehh);
        $('#progresstar').attr('title','累计在线上课：'+data.user_progress.doneclassnum+'课时');
        $('#progresstar').css('width',data.user_progress.progress+'%');
        $('#noprogresstar').css('width',data.user_progress.noprogress+'%');
      }
    });
  }

  function continueVideo(){
    $(".videoShadow2").hide();
    clearInterval(timeout);
    myPlayer.play();
  }

</script>
</body>
</html>