<template>
	<div v-if="show">
        <video class="video" ref="video" :src="videoUrl" :poster="`${poster}${source == 1 ? '/320/180' : ''}`" controls="true" @play="_play" @pause="_pause"></video>
	</div>
</template>
<script>
	export default {
		props: {
			video: {},
            source: {},
			poster: {},
		},
        data(){
            return {
                show: true,
            }
        },
        computed: {
            videoUrl(){
                if(window.location.protocol == 'http:'){
                    return this.video.replace("https://","http://");
                }else{
                    return this.video.replace("http://","https://");
                }
            }
        },
		mounted(){
            
        },
        methods: {
            _play(){
            },
            _pause(){
                this.show = false;
                this.$nextTick(() => {
                    this.show = true;
            	})
            }
        },
        beforeDestroy(){

        },
	}
</script>
<style scoped lang="less">
	.video{
		width: 100%;
		min-height: 160px;
        max-height: 400px;
	}
    video{
        position: relative;
        width: 100%;
    }
    video::-webkit-media-controls-panel {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    video::-webkit-media-controls-enclosure {
        display: block !important;
    }
</style>
