<template>
    <div class="vide-con">
		<div class="mask-con-con"  @click.stop="playVideo">
			<div class="uni-video-cover">
				<div class="uni-video-cover-play-button" v-show="!isPlay" />
			</div>
		</div>
		<video ref="myVideo" class="myVideo" :src="item.video" @play="play" @pause="pause" :poster="poster"></video>
	</div>
</template>
<script>
export default {
    props: {
        item: {
			type: Object,
			default: () => ({}),
		},
        isActive:Boolean,
        show:Boolean
    },
    data(){
        return{
            timer: null, // 重复绘制对象
            isplay: false, // 是否播放
            clickTime: 0, // 记录第一次点击时间
            videDom:null,
            isPlay:false,
            showControls:false,
            left:0,
            loadProgress:0,
            poster:""
        }
    },
    mounted() {
		this.videDom = this.$refs.myVideo
        if(this.item.video){
            this.getPoster()
        }
	},
    watch: {
        show(val) {
            if (!val) {
                this.close();
            }
        },
        isActive(val){
            if (!val){
                this.close();
            }
        },
        item(){
            if(this.item.video){
                this.getPoster()
            }
        },
    },
    methods:{
        async getPoster(){
            this.poster=await this.getVideoBase64(this.item.video,'100%','100%')
        },
        play(){	
            this.isPlay=true
        },
        pause(){
            this.isPlay=false
        },
        close(){
            this.videDom.pause()
        },
        playVideo() {
            if(this.isPlay){
                this.videDom.pause()
            }else{
                this.videDom.play()
            }
            
        }
    }
}
</script>
<style lang="less" scoped>
.vide-con {
    position: relative;
    width: 100%;
    height: 100%;
    .mask-con-con {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 44px;
        left: 0;
        background-color: transparent;
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        .uni-video-cover{
            position: absolute;
            background-color: transparent;
        }
        .uni-video-cover-play-button{	
            width: 40px;
            height: 40px;
            background-size: 50%;
            border-radius: 50%;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAAAXNSR0IArs4c6QAAAWhJREFUSA1j+P///0cgBoHjQGzCQCsAtgJB/AMy5wCxGNXtQ9iBwvoA5BUCMQvVLEQxHpNzDSjkRhXLMM3GKrIeKKpEkYVYjcUu+AMo3ALE3GRZiN1MvKKPgbIRJFuG10j8koeA0gZEW4jfLIKyf4EqpgOxMEELCRpFnIJ3QGU5QMyM00LizCFa1SWgSkeslhFtBGkKVwGVy6FYSJp+klR/A6quB2JOkIWMIK0oNlOf8xBoZDE9LAI7nYn6HsBq4l96WHQEaLUpAyiOaASeAM2NgvuPBpaACt82IEYtfKls0UagecpwXyAzqGTRdaA57sjmYrAptAjUsCkGYlYMg9EFyLQI1IiZB8Ti6Obh5JNh0QmgHlOcBuKSIMGi50C18UDMiMssvOJEWPQLqKYbiHnxGkRIkoBF24DyaoTMIEoeh0W3geI+RBlArCI0iz4D+RVAzEasfqLVAQ19AcSg5LoYiKWI1kiiQgCMBLnEEcfDSgAAAABJRU5ErkJggg==");
            cursor: pointer;			
        }
        .uni-video-bar{
            z-index: 100;
        }
    }
    .myVideo{
        width: 100%;
        height: 100%;
    }
}
</style>