public/index.html

@@ -7,6 +7,15 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link href="http://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
+        <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
+        <!--[if lt IE 9]>
+        <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
+        <![endif]-->
+        <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
+        <script src="http://imgcache.qq.com/open/qcloud/video/tcplayer/lib/hls.min.0.8.8.js"></script>
+        <!-- 引入播放器 js 文件 -->
+        <script src="http://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>
     <script>
         //designWidth:设计稿的实际宽度值，需要根据实际设置
         //maxWidth:制作稿的最大宽度值，需要根据实际设置

src/components/LivePlay.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="video">
-    <video :controls="true" :src="info.livestatus == 0 ? info.fileurl :  info.vodurl"></video>
+    <video :id=" 'a' + time" style="width:100%;height:100%"></video>
     <div class="liveinfo">
           <div class="left">
               <div>
@@ -38,11 +38,14 @@
   height: 563px;
   border-radius: 18px;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
   > video {
     width: 100%;
     height: 505px;
   }
   .liveinfo{
+        flex-shrink: 0;
         display: flex;
         justify-content: space-between;
         height: 58px;
@@ -87,7 +90,8 @@
 import { livestart } from '@/api';
 import router from '@/router';
 import { useI18n } from '@/utils/i18n';
-import { defineComponent, ref } from "vue";
+import { defineComponent, onUpdated, ref } from "vue";
+import { onBeforeRouteLeave } from 'vue-router';
 
 export default defineComponent({
   props:{
@@ -110,12 +114,30 @@ export default defineComponent({
         })
       }
     }
+    const time = ref(new Date().getTime())
+    let play: any;
+    onUpdated(()=>{
+        // console.log(props.url)
+        if(props.info){
+          play = window.TCPlayer('a' + time.value, { 
+              fileID: (props.info.livestatus == 0 ? props.info.fileid : props.info.vodid),
+              appID: '1303872925' 
+          });
+        }
+       
+    })
+    onBeforeRouteLeave((to, from, next) => {
+      console.log(121)
+      play.dispose()
+        next()
+    })
     // const liveinfo = ref(props.liveinfo)
     return {
       bianji,
       kaishi,
-      lan
+      lan,
+      time
     }
-  },
+  }
 });
 </script>

src/components/VideoPlay.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="video">
         
-        <video :src="url" :controls="true"></video>
+        <video style="width:100%; height:100%;" :id="'a' + url" ></video>
     </div>
 </template>
 <style lang="scss" scoped>
@@ -19,7 +19,9 @@
 }
 </style>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import router from '@/router';
+import { defineComponent, onMounted, onUpdated } from 'vue';
+import { onBeforeRouteLeave, useRouter } from 'vue-router';
 
 export default defineComponent({
     props:{
@@ -27,8 +29,22 @@ export default defineComponent({
             type:String
         }
     },
-    setup(){
+    setup(props, ctx){
         console.log(1)
+        let play: any;
+        onUpdated(()=>{
+            console.log(props.url)
+            play = window.TCPlayer('a' + props.url, { 
+                fileID: props.url,
+                appID: '1303872925' 
+            });
+        })
+        onBeforeRouteLeave((to, from, next) => {
+            console.log(121)
+            play.dispose()
+                next()
+        })
+      
     }
 })
 </script>

src/import-png.d.ts

@@ -19,3 +19,5 @@ declare module 'tim-js-sdk'{
 }
 
 declare var FB: any;
+
+declare var TCPlayer: any;

src/views/regime/VideoInfo.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="videoinfo">
         <div class="info">
-            <VideoPlay :url="result.fileurl"></VideoPlay>
+            <VideoPlay :url="result.fileid"></VideoPlay>
             <VideoCont :videoid="result.videoid" :yuanyin="result.statusdesc" :date="result.createdAt" :watch="result.watch" :share="result.share" :status="result.status"></VideoCont>
         </div>
         <VideoReview :videoinfo="result.score" class="review" v-if="result.status == 1"></VideoReview>