vue 中的 video 弹框实现

前言

今天在 vue 项目中需要一个弹框视频的实现,具体需求为:点击按钮，弹出视频框，播放视频。

image.png
image.png

于是用 element-ui 的 dialog 组件实现。

// template
  <el-dialog
    :visible.sync="dialogVisible"
    width="800px"
    height="480"
    :before-close="handleClose"
  >
    <el-divider />
    <video id="video" controls width="800" height="480" poster="../../../../assets/images/account/member.png">
      <source src="../../../../assets/video/banner.mp4" type="video/mp4">
    </video>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      // 关闭弹出框时 视频关闭播放
      const video = document.getElementById('video')
      video.pause()
    },
  },
}
</script>

点击视频时触发这个事件:

    handleVideo() {
      this.$refs.videoDiolag.dialogVisible = true
    },
``