<template>
  <div>
    <!-- 视频 -->
    <a-modal v-model:open="videoModal.isShow" title :footer="null" style="width: 734px;" wrapClassName="video-modal" :destroyOnClose="true">
      <div class="g_flex_row_center">
        <video :controls="true" style="width: 90%;max-height:calc(100vh - 200px);">
          <source :src="videoModal.url" type="video/mp4" />
          <source :src="videoModal.url" type="video/ogg" />您的浏览器不支持 HTML5 video 标签。
        </video>
      </div>
    </a-modal>
  </div>
</template>


<script setup>
/* 视频预览
 * @params videoModal 配置对象
 */
import { ref, onMounted, getCurrentInstance, watch, defineEmits, defineProps } from 'vue'
import { message } from 'ant-design-vue'
const props = defineProps({
  videoModal: {
    type: Object,
    default: {
      isShow: false,
      url: '',
    },
  },
})
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G
onMounted(() => {})
</script>

<style lang='less' scoped>
.video-modal {
  .ant-modal-content {
    background-color: transparent;
    box-shadow: none;
  }
  .ant-modal-close {
    width: 30px;
    height: 30px;
    color: #ccc;
    svg {
      width: 30px;
      height: 30px;
    }
  }
}
</style>