更换了提示

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>