<template>
  <div class="video-wrapper mb-4 last:mb-0">
    <component v-if="options.title" :is="getComponent(options.title)" :options="options.title"></component>
    <div class="mb-6 mx-auto" v-else-if="options.image">
      <img class="mb-1" :src="options.image" />
    </div>
    <video @play="handlePlay" webkit-playsinline playsinline x-webkit-airplay x5-playsinline preload="preload" :poster="options.poster" controls :src="options.video"></video>
  </div>
</template>
<script>
import Base from './base';
import EventBus from '@/utils/eventBus.js';

export default {
  name: 'v-video',
  extends: Base,
  methods: {
    handlePlay(e){
      EventBus.$emit('playVideo', e);
    }
  }
}
</script>
<style lang="less">
.video-wrapper {
  & > :first-child {
    margin-bottom: 0.4rem;
  }

  & > :last-child {
    margin-bottom: 0;
  }
}
</style>
