vue2中点击按钮利用弹窗播放mp4格式的视频

在Vue2中，如果你想要在点击按钮后通过弹窗播放mp4格式的视频，你可以使用`video`标签结合模态框组件（如Element UI的Dialog，或者自己定义的简单模态框）来实现。以下是基本的实现步骤：

1. 首先，确保你的项目中已经安装并引入了模态框组件库，如果使用Element UI，则需要按照文档配置好所需的组件。

2. 在你的Vue组件中定义一个数据属性用于控制模态框的显示与隐藏，例如`showModalVideo`。

3. 在模态框中添加一个`video`标签，并设置其`src`属性为视频文件的路径。

4. 定义一个方法，当点击按钮时触发该方法，该方法将设置`showModalVideo`为`true`，以显示模态框。

5. 确保模态框组件的关闭逻辑可以响应用户的关闭操作，并将`showModalVideo`设置为`false`，从而关闭模态框。

示例代码如下：

<template>
  <div>
    <el-button @click="openVideoModal">播放视频</el-button>
    <el-dialog :visible.sync="showModalVideo" title="视频播放">
      <video width="320" height="240" controls>
        <source :src="videoSrc" type="video/mp4">
        您的浏览器不支持视频标签。
      </video>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showModalVideo = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModalVideo: false,
      videoSrc: '你的视频文件路径.mp4'
    };
  },
  methods: {
    openVideoModal() {
      this.showModalVideo = true;
    }
  }
};
</script>

在这个例子中，`el-button`是Element UI提供的按钮组件，点击后会触发`openVideoModal`方法，该方法使得`showModalVideo`变为`true`，显示模态框。模态框中嵌入了`video`标签用于播放视频。