<template>
  <div class="case-container">
    <div class="case-list">
      <div class="case-item" v-for="item in caseList" :key="item.id">
        <video-card :src="item.src" :poster="item.src"></video-card>
        <!--<images-card></images-card>-->
      </div>
    </div>
  </div>
</template>

<script>
import VideoCard from './videoCard'
// import ImagesCard from './imagesCard'
export default {
  components: {
    VideoCard
    // ImagesCard
  },
  props: {
    caseList: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="less" scoped>
</style>

<template>
  <div class="video-container">
    <video
      v-if="isPlay"
      ref="video"
      class="video"
      controls
      :src="src"
      :poster="poster"
      :autoplay="isPlay"
      @touchmove.prevent
      @pause="pause"
      @play="play"
      @ended="pause"
      webkit-playsinline="true"
      playsinline="true"
    ></video>
    <div v-if="disabled" class="cover-outer"></div>
    <!--自定義播放按鈕-->
    <div
      v-if="!isPlay"
      class="cover center-flex"
      :style="poster ? {backgroundImage: `url(${poster})`} : {}"
    >
      <img
        @click="play"
        src="xxx"
        class="play-icon"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    poster: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isPlay: false,
      disabled: true
    }
  },
  mounted() {
    this.$bus.$on('stopVideo', this.pause) // 子組件接受數(shù)據(jù)
  },
  beforeDestroy() {
    this.$bus.$off('stopVideo') // 銷(xiāo)毀前清除事件監(jiān)聽(tīng)
  },
  methods: {
    clearTimer() {
      this.timer && clearTimeout(this.timer)
    },
    play() {
      this.$bus.$emit('stopVideo') // 子組件發(fā)送數(shù)據(jù)
      this.clearTimer()
      this.isPlay = true
      // 防止點(diǎn)擊穿透
      this.timer = setTimeout(() => {
        this.disabled = false
      }, 500)
      this.$nextTick(() => {
        this.$refs.video.play()
      })
    },
    pause() {
      this.clearTimer()
      this.isPlay = false
      this.disabled = true
    }
  }
}
</script>

<style lang="less" scoped>
// 樣式省略
</style>

import Vue from 'vue'

export default () => {
  Vue.prototype.$bus = new Vue()
}