播放暂停按钮

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

@@ -12,6 +12,29 @@
       :globalOptions="{controls:true}"
       :options="options">
     </video-player>
+    <div class="dialog-footer">
+      <el-row class="media-footer">
+        <el-col :span="8" class="media-time">
+          <span>{{curTimes|useTime}}</span>
+          <strong>/</strong>
+          <span>{{media.duration|useTime}}</span>
+        </el-col>
+        <el-col :span="8" class="media-center">
+          <el-button class="bicon" v-if="onPlay" type="primary" @click="doPause" icon="el-icon-video-play" circle></el-button>
+          <el-button class="bicon" v-else  type="warning" @click="doPlay" icon="el-icon-video-pause" circle></el-button>
+        </el-col>
+        <el-col :span="8" 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;">
+            <el-select  placeholder="流畅" v-model="selectMediaType" class="media-el-select" @change="(val)=>{$emit('changeMedia', val)}">
+              <el-option label="流畅" value="ld" ></el-option>
+              <el-option label="标清" value="hls"></el-option>
+            </el-select>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
 
   </div>
 </template>
@@ -30,6 +53,8 @@
         tickNum: 0,
         prevTime:0,
         isReady:false,
+        selectMediaType:'hls',
+        curTimes:0,
         onPlay: false
       }
     },
@@ -37,6 +62,11 @@
       videoPlayer
     },
     watch:{
+      mediaType( ){
+        console.log("change mediaType", this.mediaType)
+        this.selectMediaType = this.mediaType;
+        if( !this.mediaType ) return;
+      },
       dialog( showDilog ){
         if( !showDilog){
           this.doPause()
@@ -45,6 +75,10 @@
       }
     },
     props: {
+      mediaType:{
+        type: String,
+        default: ''
+      },
       media:{
         type: Object,
         default: ()=>{
@@ -62,6 +96,18 @@
         }
       }
     },
+    filters:{
+      useTime(val){
+        let timestr = ""
+        let hour = parseInt(val/3600);
+        let min = parseInt(val/60 % 60);
+        let sec = parseInt(val%60);
+        if( hour <10) hour = "0"+hour;
+        if( min <10) min = "0"+min;
+        if( sec <10) sec = "0"+sec;
+        return hour+":"+min+":"+sec
+      }
+    },
     beforeDestroy() {
       if (this.timer) {
         clearInterval(this.timer); //关闭
@@ -90,11 +136,12 @@
         this.isReady = true
       },
       onPlayerTimeupdate( player ){
+        let myPlayer = this.$refs.videoPlayer.player;
+        let curTimes = player.cache_.currentTime;
+        this.curTimes = curTimes||0
         if( this.media.isFinish ){
           return;
         }
-        let myPlayer = this.$refs.videoPlayer.player;
-        let curTimes = player.cache_.currentTime;
         if( curTimes>30 && curTimes > this.media.position+15 && !this.media.isFinish){
           console.log("return", curTimes, this.media.position )
           player.currentTime( this.media.position );
@@ -117,6 +164,10 @@
       onPlayerEnded( event ){
         this.tick( true )
       },
+      onClose(){
+        this.doPause()
+        this.$emit("close")
+      },
       doPause( ){
         let myPlayer = this.$refs.videoPlayer.player;
         myPlayer && myPlayer.pause()
@@ -226,4 +277,34 @@
     margin:20px auto;
     height: 30px;
   }
+  .media-footer{
+    padding: 0px 30px;
+    text-align: left;
+    line-height: 40px;
+    bottom: -10px;
+  }
+  .media-center{
+    text-align: center;
+    padding: 0px;
+  }
+  .media-time{
+    font-size: 21px;
+    vertical-align: center;
+  }
+  .media-select{
+    white-space:nowrap;
+    text-align: right;
+    line-height: 40px;
+    float: right;
+    margin: 0px !important;
+  }
+  .bicon{
+    font-size: 28px;
+    padding: 4px  !important;
+  }
+  .media-el-select {
+    font-size: 28px;
+    width: 80px;
+    padding: -4px auto  !important;
+  }
 </style>

src/containers/center/play/index.vue

@@ -125,31 +125,22 @@
       </div>
      </div>
     <el-dialog
-     class="fc tc media-dialog"
+     class="media-dialog"
      :visible.sync="mediaDialog"
-     append-to-body
      top="50px"
      :title="media.name"
-     :close-on-click-modal="false"
      width="640px"
      >
-
         <Media
           :options="options"
           :dialog="mediaDialog"
           :media="media"
           :duration="info.duration"
-          @close="mediaDialog=false"
+          @close="closeMedia"
+          :mediaType="mediaType"
+          @changeMedia="changeMedia"
           @update="update">
         </Media>
-        <span slot="footer" class="dialog-footer mt5">
-          <el-button type="warning" @click="mediaDialog=false">退出播放</el-button>
-          <el-select placeholder="流畅" v-model="mediaType" style="width: 80px;">
-            <el-option label="流畅" value="ld"></el-option>
-            <el-option label="标清" value="hls"></el-option>
-          </el-select>
-        </span>
-
     </el-dialog>
 
     <el-dialog title="输入认证" center :visible.sync="editRzcode"  >
@@ -188,6 +179,7 @@
         tpl:{},
         media:{},
         options:{
+          controls:true,
           autoplay: true, // 如果true,浏览器准备好时开始回放。
           muted: false, // 默认情况下将会消除任何音频。
           loop: false, // 导致视频一结束就重新开始。
@@ -224,6 +216,7 @@
         this.updateShowList()
       },
       mediaType(val){
+        if( !val ) return;
         let mediaUrl = this.mediaUrl;
         if( val == 'ld'){
           mediaUrl = mediaUrl.replace('/hls/', '/ld/');
@@ -245,16 +238,22 @@
          } else if (val == '完成') {
              return val = 'el-bg-inner-done'
          }
-      },
-      useTime(val){
-        let timestr = ""
-        timestr+=  val> 3600?parseInt(val/3600):"0";
-        timestr+=  ":"+(val> 60?parseInt((val%3600)/60):"00");
-        timestr += ":" + (val%60);
-        return timestr
       }
     },
     methods: {
+      changeMedia( val ){
+        if( !val ) retur;
+        let mediaUrl = this.mediaUrl;
+        if( val == 'ld'){
+          mediaUrl = mediaUrl.replace('/hls/', '/ld/');
+        }else{
+          mediaUrl = mediaUrl.replace('/ld/', '/hls/');
+        }
+        this.options.sources = [{src:mediaUrl,type: "application/x-mpegURL"}];
+        this.options.playtimes = this.media.position||0;
+        this.options.autoplay = this.options.playtimes>0;
+        this.mediaDialog = true;
+      },
       startExam( ){
         let courseId = this.courseId
         delExam()
@@ -361,6 +360,10 @@
         this.media.percent = getPercent(this.media);
         this.updateShowList()
       },
+      closeMedia(){
+        this.mediaType = '';
+        this.mediaDialog=false;
+      },
       // 加载媒体
       loadMedia( item, index ) {
         this.media = item;
@@ -391,12 +394,11 @@
     /* display: none !important; */
    }
   .media-dialog .el-dialog__body{
-    padding: 0 !important;
+    padding: 0 0 16px 0 !important;
    }
    .media-dialog .el-scrollbar__wrap {
     overflow-x: hidden!important;
   }
-
    .mprocess{
      margin: 0 auto;
      width: 150px !important;
@@ -427,4 +429,5 @@
    .el-bg-inner-done .el-progress-bar__inner{
      background-image: linear-gradient(to right, #3587d8 , #53ff54);
    }
+
 </style>