播放视频

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

@@ -14,16 +14,16 @@
     </video-player>
     <div class="dialog-footer pt30">
       <el-row class="media-footer">
-        <el-col :span="8" class="media-time">
+        <el-col :span="10" class="media-time">
           <span>{{curTimes|useTime}}</span>
           <strong>/</strong>
           <span>{{media.duration|useTime}}</span>
         </el-col>
-        <el-col :span="8" class="media-center">
+        <el-col :span="4" class="media-center">
           <el-button class="bicon" v-if="!onPlay" type="primary" @click="doPlay" icon="el-icon-video-play" circle></el-button>
           <el-button class="bicon" v-else  type="warning" @click="doPause" icon="el-icon-video-pause" circle></el-button>
         </el-col>
-        <el-col :span="8" class="media-select">
+        <el-col :span="10" class="media-select">
           <el-button class="bicon"  type="danger" icon="el-icon-close" @click="onClose" style="float: right;" >
           </el-button>
           <div style="margin-top:0px;float: right;">
@@ -110,6 +110,7 @@
     },
     beforeDestroy() {
       if (this.timer) {
+        console.log("beforeDestroy")
         clearInterval(this.timer); //关闭
       }
     },
@@ -119,13 +120,22 @@
       }
     },
     created() {
-      this.timer = setInterval(this.tick, 5 * 1000);
-      // this.startMonitor();
+      this.startTick()
     },
     methods: {
+      startTick(){
+        console.log("startTick")
+        let tick = this.tick;
+        if( this.timer ) clearInterval(this.timer);
+        this.timer = setInterval(tick, 5 * 1000);
+      },
+      stopTick(){
+        console.log("stopTick")
+        if( this.timer ) clearInterval(this.timer);
+      },
       playerReadied(player) {
-        // console.log("playerReadied", this.media.position);
         let that = this;
+        console.log("init", this.media.position);
         if( this.media.position){
           this.setposition( this.media.position );
         }else{
@@ -142,11 +152,6 @@
         if( this.media.isFinish ){
           return;
         }
-        if( curTimes>30 && curTimes > this.media.position+15 && !this.media.isFinish){
-          console.log("return", curTimes, this.media.position )
-          player.currentTime( this.media.position );
-          return;
-        }
       },
       setposition( position ) {
         if( position > this.media.duration) position = this.media.duration;
@@ -159,6 +164,7 @@
         this.onPlay = true
       },
       onPlayerPause(event) {
+        this.stopTick()
         this.onPlay = false
       },
       onPlayerEnded( event ){
@@ -169,14 +175,15 @@
         this.$emit("close")
       },
       doPause( ){
+        this.stopTick()
         let myPlayer = this.$refs.videoPlayer.player;
         myPlayer && myPlayer.pause()
-        console.log("doPause", myPlayer)
+        console.log("doPause")
         this.onPlay = false
       },
       doPlay(){
         this.onPlay = true
-        console.log("doPlay")
+        this.startTick();
         if( !this.$refs.videoPlayer || !this.$refs.videoPlayer.player ) return;
         if( !this.dialog ) return this.doPause();
         let myPlayer = this.$refs.videoPlayer.player;
@@ -184,6 +191,7 @@
         this.tickNum = 0
       },
       onPlayerStart() {
+        this.startTick();
         this.onPlay = true
       },
       startMonitor() {
@@ -218,25 +226,26 @@
         let media = this.media;
         this.tickNum ++
         // 已经完成
-        if( this.media.isFinish )  return;
-
+        if( this.media.isFinish ) {
+          console.log("finish")
+          return;
+        }
         // 主动暂停
         let myPlayer = this.$refs.videoPlayer.player;
         let curTimes = parseInt(myPlayer.currentTime());
         // 后退无心跳
         if( this.media.position > curTimes && !force ) return;
-        if( curTimes< 4) return;
+        if( curTimes< 4) {
+          console.log("curTimes")
+          return;
+        }
 
         let isFinish = force?1:0
         if( curTimes >= media.duration ) isFinish = 1;
-
+        console.log("tick", curTimes, isFinish)
          //  拉到后面
         if( !isFinish ){
           if ( !this.onPlay ) return;
-          if( curTimes > this.prevTime){
-            this.prevTime = curTimes
-            return;
-          }
         }
         // 强制完成
         let param ={id: media.id, position:curTimes ,isFinish};
@@ -296,7 +305,7 @@
     padding: 0px;
   }
   .media-time{
-    font-size: 16px;
+    font-size: 18px;
     vertical-align: center;
   }
   .media-select{

src/containers/center/play/index.vue

@@ -126,10 +126,11 @@
      </div>
     <el-dialog
      class="media-dialog"
+     :close-on-click-modal="false"
      :visible.sync="mediaDialog"
      top="50px"
      :title="media.name"
-     :width="mediaType=='hls'?'640px':'480px'"
+     :width="mediaType=='hls'?'640px':'460px'"
      >
         <Media
           :options="options"
@@ -354,8 +355,9 @@
       },
       //
       update( item ){
-        let index = this.media.index
-        if( item.position ) this.media.position = item.position
+        if( item.position> this.media.position) {
+          this.media.position = item.position
+        }
         this.media.isFinish = item.isFinish
         this.media.id = item.id
         this.media.percent = getPercent(this.media);
@@ -369,16 +371,20 @@
       loadMedia( item, index ) {
         this.media = item;
         this.media.index = index
-        httpServer('course.GetMedia', {id:item.id}).then( ({data, code}) => {
-          this.mediaUrl = data
-          if(this.mediaUrl.indexOf( '/hls/') >-1 ){
-            this.mediaType = 'hls';
+        httpServer('course.GetMedia', {id:item.id}).then( res => {
+          if( res.code != 200) return;
+          let {mediaUrl, id, position} = res.data||{};
+          this.mediaUrl = res.data.mediaUrl;
+          if( this.mediaType == 'ld' ){
+            this.mediaUrl = this.mediaUrl.replace('/hls/', '/ld/')
           }else{
-            this.mediaType = 'ld';
+            this.mediaUrl = this.mediaUrl.replace('/ld/', '/hls/')
           }
+          this.media.position = position;
+          this.media.id = id;
           this.options.sources = [{src:this.mediaUrl,type: "application/x-mpegURL"}];
-          this.options.playtimes = item.position;
-          this.options.autoplay = item.position>0;
+          this.options.playtimes = position||1;
+          this.options.autoplay  = position>0;
           this.mediaDialog = true;
         });
       }