<template>
  <view class="bnox">
    <image class="default-img" v-if="!show" :style="{'height':height,'width':width}" :src="defaultSrc"/>
      <view class="videoView">
            <video autoplay muted :enable-progress-gesture="false" :controls="false" loop class="real-img":style="{'height':height,'width':width}" :src="realSrc" />
      </view>
  </view>
</template>

<script>
export default {
    props:['defaultSrc','realSrc','width','height'],
    watch:{
        realSrc(val){
            if(val){
                setTimeout(() => {
                    this.show = true
                }, 5000);
            }
        }
    },
    data(){
        return {
            loadOver:false,
            show:false
        }
    },
    methods: {
        loadOverFunction(){
            this.loadOver = true
        }
    }
}
</script>

<style lang="scss" scoped>
.videoView {
    z-index: 1;
}
.bnox {
    position: relative;
.default-img {
    position: absolute;
    z-index: 2;
}

}

</style>