<template>
    <div class="video">
        
        <video style="width:100%; height:100%;" :id="'a' + url" ></video>
    </div>
</template>
<style lang="scss" scoped>
.video{
    width: 976px;
    height: 563px;
    border-radius: 17px;
    background: white;
    // background-color: #0f0;
    overflow: hidden;
    >video{
        width: 100%;
        height: 100%;
    }
}
</style>
<script lang="ts">
import router from '@/router';
import { defineComponent, onMounted, onUpdated } from 'vue';
import { onBeforeRouteLeave, useRouter } from 'vue-router';

export default defineComponent({
    props:{
        url:{
            type:String
        }
    },
    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>