zhkt/protected/view/video-play.html

<!-- include 'header' -->
<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="{{classinfo.classid}}:{{uid}}" id="time">
<input type="hidden" name="video" value="<!-- if isset({{videoid}}) && !empty({{videoid}}) -->{{videoid}}<!-- endif -->" id="video">
<input type="hidden" name="wyvideo" value="<!-- if isset({{wyvideoid}}) && !empty({{wyvideoid}}) -->{{wyvideoid}}<!-- 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="{{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>{{classinfo.classname}}</h3>
          <div class="classCVideo">
            <div class="classConLeftInfo"><span>总课时：{{classinfo.classnum}}课时（{{totalnum}}小时）</span><i class="spl">|</i><span>学习进度：<span class="done_progress">{{user_progress.progress}}</span>%（<span class="done_hh">{{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:{{user_progress.progress}}%" data-toggle="tooltip" data-placement="bottom" title="累计在线上课：{{user_progress.doneclassnum}}课时" id="progresstar">
              <span class="done_progress">{{user_progress.progress}}</span>%
            </div>
            <div class="progress-bar bar-gary" style="max-width:148px;width:{{user_progress.noprogress}}%;" id="noprogresstar">
              <span class="done_noprogress">{{user_progress.noprogress}}</span>%
            </div>
          </div>
          <div class="classCVideo" style="text-align: center;">
            <div class="classConLeftInfo"><span id="classStatus"><!-- if {{successClass}} == 1 -->已完成本课程学习<!-- else -->本次在线时长：<span id="dtime">00:00:00</span></span><!-- endif --></div>
            <input type="hidden" name="lasttime" id="lasttime" value="0" />
            <input type="hidden" name="doness" id="doness" value="{{user_progress.doness}}" />
            <input type="hidden" name="totalss" id="totalss" value="{{user_progress.totalss}}" />
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="profile">
        <!-- if isset({{kttype}}) && !empty({{kttype}}) -->
        <!-- loop kttype -->
        <div class="classList">
          <h4><span>{{kttype' value.typeprefix}}</span> {{kttype' value.typename}}</h4>
          <!-- if isset({{kttype' value.section}}) && !empty({{kttype' value.section}}) -->
          <!-- loop kttype' value.section -->
          <dl class="classSection">
            <!-- if {{kttype' section' value.ishow}} == 1 --><dt>{{kttype' section' value.seprefix}} {{kttype' section' value.sename}}</dt><!-- endif -->
            <!-- if isset({{kttype' section' vlaue.video}}) && !empty({{kttype' section' value.video}}) -->
            <!-- loop kttype' section' value.video -->
            <dd>
              <div id="video_{{kttype' section' video' value.videoid}}" class="classVideo<!-- if ({{videoid}} == {{kttype' section' video' value.videoid}}) --> now<!-- endif -->">
                <a href="javascript:;" onclick="playVideo('{{kttype' section' video' value.wy_video_id}}','{{kttype' section' video' value.videoid}}');"><!-- if ({{videoid}} == {{kttype' section' video' value.videoid}}) --><i class="glyphicon glyphicon-play" style="display: inline-block"></i><!-- else --><i class="glyphicon glyphicon-play" style="display: none"></i><!-- endif -->{{kttype' section' video' value.videoname}}.{{kttype' section' video' value.file_ext}}
                  <span class="classTime fR">{{totime(kttype' section' video' value.file_time)}}</span>
                  <div class="btnClassGroup">
                    <button type="button" class="btn btn-success btnClass">立即播放</button>
                  </div>
                </a>
              </div>
            </dd>
            <!-- endloop -->
            <!-- endif -->
          </dl>
          <!-- endloop -->
          <!-- endif -->
        </div>
        <!-- endloop -->
        <!-- 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" <!-- if {{successClass}} == 1 -->style="display:none;"<!-- 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>
<!-- include 'footer' -->
<div class="bodyBg" <!-- if {{successClass}} == 1 -->style="display:none;"<!-- endif -->></div>
<script type="text/javascript" src="https://blueimp.github.io/JavaScript-MD5/js/md5.js"></script>
<script src="{{rootUrl}}global/js/timer.js"></script>
<script>
  var myPlayer = neplayer('my-video');
  var totalnum = '{{totalnum}}';
  var classid = '{{classinfo.classid}}';
  var videolist = '{{trrep(videolist)}}';
  var videotype = '{{play_type}}';
  var videosrc = '{{play_url}}';
  var videotime = '{{play_time}}';
  if('{{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: '{{rootUrl}}playVideo',
      data: {classid:'{{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: '{{rootUrl}}updateClassAndVideo',
      data: {seetime:time,classid:'{{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>