<template>
  <div>
    <video :src="src" :width="width" :height="height" @click="handlePreview" style="cursor: pointer"/>

    <el-dialog :visible.sync="visible" width="800px" :title="title">
      <video :src="src" controls style="width: 720px; height: 405px;background-color:#000;"/>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "VideoPreview",
  props: {
    src: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: "50px"
    },
    height: {
      type: String,
      default: "50px"
    },
    title: {
      type: String,
      default: '视频预览'
    }
  },
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    handlePreview() {
      this.visible = true;
    }
  }
}
</script>
