修改

src/api/week.js

@@ -69,3 +69,12 @@ export function getFilePathAPI(params) {
   })
 }
 
+
+// 获取视频首张图片
+export function getVideoImgAPI(params) { 
+  return request({
+      url: `${requestPath.file}/getVideoImg?fileName=${params}`,
+      method: 'get',
+  })
+}
+

src/components/practice/textCase.vue

 <template>
   <div class="type-text">
-    <div class="answer-cnt" :style="{'paddingBottom':(open ? autoHeight:'.8rem')}" >
-      <div  class="default-font" v-html="dataObj.content"></div>
-      <!-- <video class="video" v-if="dataObj.video" :src="videoUrl(dataObj.video)" controls="controls"
-          x5-playsinline="" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" 
-          x5-video-player-type="h5-page" x5-video-player-fullscreen="" x5-video-orientation="portraint"></video> -->
+    <div class="video-wrap" v-if="videoOpen">
+      <img src="@/assets/img/public/left.png" alt="" @click="videoOpen= false" class="video-wrap-img">
       <div class="video" v-if="dataObj.video">
         <div id="mse"></div>
       </div>
+      </div>
+    <div class="answer-cnt" :style="{'paddingBottom':(open ? autoHeight:'.8rem')}" >
+      <div class="video-pic" @click="openVideo">
+      <img class="video-play" src="@/assets/img/public/play-icon.png">
+      <img class="video-img" :src="imgUrl(videoImgUrl)" alt="">
+      </div>
+      <div  class="default-font" v-html="dataObj.content" ></div>
     </div>
     <div class="answer-text" :style="{'height':(open ? autoHeight:'.8rem')}">
       <div class="icon-wrap" >
@@ -24,10 +28,10 @@
 </template>
 
 <script>
-import { getVideo, videoUrl } from '@/utils/global'
+import { getVideo, videoUrl,imgUrl } from '@/utils/global'
 import Player from 'xgplayer'
 import HlsJsPlayer from 'xgplayer-hls.js';
-import { getFilePathAPI } from '@/api/week'
+import { getFilePathAPI,getVideoImgAPI } from '@/api/week'
 export default {
   name: 'textCase',
   props:{
@@ -40,9 +44,12 @@ export default {
     return {
       videoUrl:videoUrl,
       getVideo:getVideo,
+      imgUrl:imgUrl,
       open:false,
       autoHeight:null,
       slotHeight:null,
+      videoOpen:false,
+      videoImgUrl:'',
       playerConfig:{
         id: "mse",                      // 挂载节点id
         playsinline: true,              // 是否在线播放
@@ -50,7 +57,6 @@ export default {
         autoplay: false,                // 自动播放
         fluid: true,                    // 流式布局
         useHls:true,
-        "x5-video-player-type": "h5"
       },
       player:null
     }
@@ -61,20 +67,30 @@ export default {
   },
   mounted() {
     if(!this.dataObj.video) return 
-    getFilePathAPI(this.dataObj.video).then(res=>{
+    getVideoImgAPI(this.dataObj.video).then(res=>{
       if(res.data.code == 0){
-        let data = res.data.data
-        data = data.replace('.mp4','')
-        this.playerConfig.url = this.getVideo(data)
-        this.player = new HlsJsPlayer(this.playerConfig)
+        this.videoImgUrl = res.data.data
       }else{
         warningMessage(res.data.msg)
       }
     })
-
   },
   watch: {},
   methods: {
+    openVideo(){
+      this.videoOpen = true
+      if(!this.dataObj.video) return 
+      getFilePathAPI(this.dataObj.video).then(res=>{
+        if(res.data.code == 0){
+          let data = res.data.data
+          data = data.replace('.mp4','')
+          this.playerConfig.url = this.getVideo(data)
+          this.player = new HlsJsPlayer(this.playerConfig)
+        }else{
+          warningMessage(res.data.msg)
+        }
+      })
+    },
     changeOpen(){
       this.open = !this.open
       this.scrollTop()
@@ -107,11 +123,50 @@ export default {
     line-height: .24rem;
     margin-bottom: .15rem;
   }
+  .video-pic{
+    position: relative;
+    height: 2rem;
+    width: 100%;
+    display: flex;
+    .video-img{
+      height: 2rem;
+      width: 100%;
+    }
+    .video-play{
+      height: 50px;
+      width: 50px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%); 
+    }
+  }
+}
+
+.video-wrap{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99999999999999;
+  width: 100%;
+  height: 100%;
+  background: rgba(100, 100, 100,1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .video-wrap-img{
+    position: absolute;
+    left: 0.2rem;
+    top: 0.2rem;
+    width: 0.12rem;
+  }
   .video{
-    max-height:2rem; 
     width: 100%;
   }
 }
+
 .answer-text{
   position: fixed;
   bottom: 0;

src/utils/global.js

@@ -33,3 +33,7 @@ export const videoUrl = function(link){
 export const getVideo = function(data){
   return `${process.env.BASE_API}file/${data}/index.m3u8`
 }
+export const imgUrl = function(link){
+  // return `${process.env.BASE_API}/file/file/?fileName=${link}&isOnLine=true`
+  return `${process.env.BASE_API}file/${link}`
+}