'normal'

src/containers/center/play/components/media.vue

@@ -6,7 +6,9 @@
       :playsinline="true"
       @pause="onPlayerPause($event)"
       @play="onPlayerStart($event)"
+      @timeupdate="onPlayerTimeupdate($event)"
       @ready="playerReadied"
+      @ended="onPlayerEnded($event)"
       :globalOptions="{controls:true}"
       :options="options">
     </video-player>
@@ -25,8 +27,9 @@
     data() {
       return {
         timer: false,
-        playtimes: 0,
         tickNum: 0,
+        prevTime:0,
+        isReady:false,
         onPlay: false
       }
     },
@@ -39,9 +42,6 @@
           this.doPause()
         }
       }
-    },
-    filters:{
-
     },
     props: {
       media:{
@@ -77,7 +77,20 @@
     },
     methods: {
       playerReadied(player) {
-        this.setposition(this.playtimes);
+        if( !this.isReady ){
+          this.setposition( this.media.position );
+        }
+        console.log("isReady", this.media.position )
+        this.isReady = true
+      },
+      onPlayerTimeupdate( player ){
+        let myPlayer = this.$refs.videoPlayer.player;
+        let curTimes = player.cache_.currentTime;
+        if( curTimes > this.media.position+15 ){
+          console.log("return", curTimes, this.media.position )
+          player.currentTime( this.media.position );
+          return;
+        }
       },
       setposition( position ) {
         if( position > this.media.duration) position = this.media.duration;
@@ -85,7 +98,7 @@
           let player = this.$refs.videoPlayer.player;
           player.currentTime( position );
         }
-        console.log( this.media.position, this.media.duration, this.media.isFinish)
+        console.log("setposition", position, this.media.duration, this.media.isFinish)
         if( this.media.position >= this.media.duration-30 && !this.media.isFinish){
           this.tick( true )
         }
@@ -94,7 +107,11 @@
       onPlayerPause(event) {
         this.onPlay = false
       },
+      onPlayerEnded( event ){
+        this.tick( true )
+      },
       doPause( ){
+        console.log( "pause" )
         let myPlayer = this.$refs.videoPlayer.player;
         myPlayer && myPlayer.pause()
         this.onPlay = false
@@ -143,32 +160,38 @@
         this.tickNum ++
         // 已经完成
         if( this.media.isFinish )  return;
+
         // 主动暂停
         let myPlayer = this.$refs.videoPlayer.player;
         let curTimes = parseInt(myPlayer.currentTime());
+        // 后退无心跳
+        if( this.media.position > curTimes ) return;
+
         let isFinish = force?1:0
         if( curTimes >= media.duration ) isFinish = 1;
+
          //  拉到后面
         if( !isFinish ){
           if ( !this.onPlay ) return;
-          if( curTimes < media.position ) return this.setposition(media.position )
-          // if( this.tickNum > 180 ) return this.tickWait()
+          // if( curTimes < media.position ) return this.setposition(media.position )
         }
         // 强制完成
         let param ={id: media.id, position:curTimes ,isFinish};
-        httpServer("course.tick", param).then( res => {
+        httpServer("course.tick", param, true).then( res => {
           if (res.code == 200) {
             let {skip, position, pause} = res.data
-            if( pause ){
+            if( pause ) {
               this.doPause();
-              this.$emit("close" )
+              this.$emit("close")
               return
              }
             if( !skip ) this.setposition( position );
             Object.assign(param, res.data )
             this.$emit("update", param )
           }
-        });
+        }).catch( res =>{
+          console.log( "tick", res)
+        })
       }
     }
   }

src/containers/center/play/index.vue

@@ -188,11 +188,11 @@
             currentTimeDisplay: true, // 当前时间
             timeDivider: true, // 时间分割线
             durationDisplay: true, // 总时间
-            progressControl: false, // 进度条
+            progressControl: true, // 进度条
             remainingTimeDisplay: true, //
             customControlSpacer: true, //
             fullscreenToggle: true, // 全屏按钮
-            volumePanel: false
+            volumePanel: true
           }
         },
         list: [],
@@ -234,7 +234,7 @@
         this.$router.push(`/center/exam/${courseId}`);
       },
       printCert( ){
-        if( this.info.getXs < this.info.totalXs || this.info.score < 60){
+        if( this.info.percent < 100 || this.info.score < 60){
           this.$message.errorMsg("课程还未完成", 2)
           return;
         }
@@ -261,12 +261,12 @@
         return `获得${gxs}学时, 总共${axs}学时`;
       },
       formatExam() {
-        let {score, scoreTime} = this.info
+        let {score} = this.info
         if( score == -1 ) return `已答0次，未通过`;
-        return `最高${score<1?0:score}分, ${score>60?'通过':'未通过'}`;
+        return `最高${score<1?0:score}分, ${score>=60?'通过':'未通过'}`;
       },
       formatPass() {
-        let {score, scoreTime} = this.info
+        let {score} = this.info
         if( score == -1 ) return `未参加`;
         return `${score||0}分,${score>=60?'通过':'未通过'}`;
       },
@@ -277,7 +277,7 @@
             this.info = res.data.info;
             let list = res.data.list;
             this.list = list.map( (item)=>{
-              item.percent = getPercent(item);
+              item.percent = getPercent(item)||0;
               return item;
             })
             this.updateShowList()
@@ -314,26 +314,17 @@
         this.media.isFinish = item.isFinish
         this.media.id = item.id
         this.media.percent = getPercent(this.media);
-        if( item.isFinish && !this.options.controlBar.progressControl ){
-          this.$message.successMsg("视频播放完成", 1);
-          this.options.controlBar.progressControl = true;
-        }
         this.updateShowList()
       },
       // 加载媒体
       loadMedia( item, index ) {
         this.media = item;
         this.media.index = index
-        this.options.poster = this.info.tb+'?x-oss-process=image/resize,m_lfit,w_200';
-        this.options.controlBar.progressControl = !!item.isFinish;
-        if( item.url ){
-          this.options.sources = [{src:item.url}];
-          this.mediaDialog = true;
-          return
-        }
         httpServer('course.GetMedia', {id:item.id}).then( ({data, code}) => {
           item.url = data
           this.options.sources = [{src:item.url}];
+          console.log("position", item.position)
+          this.options.playtimes = item.position;
           this.mediaDialog = true;
         });
       }