<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 {
  name: 'menu-report-video',
  props: {
    video: {},
    source: {},
    poster: {}
  },
  data() {
    return {
      show: true
    };
  },
  computed: {
    videoUrl() {
      if (!this.video) {
        return '';
      }
      if (window.location.protocol === 'http:') {
        return this.video.replace('https://', 'http://');
      } else {
        return this.video.replace('http://', 'https://');
      }
    }
  },
  methods: {
    _play() {
      // console.log('play')
    },
    _pause() {
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    }
  }
};
</script>
<style scoped lang="less">
.video {
  width: 100%;
  min-height: 1.6rem;
  max-height: 4rem;
}
video {
  position: relative;
  width: 100%;
}
</style>
