VUE表格显示 视频，点击弹出 视频播放

效果图：

<el-table-column prop="hotVideoPath" label="热点视频" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="video">
                <el-dialog
                  title="播放热点视频"
                  width="72%"
                  append-to-body
                  top="20px"
                  :visible.sync="dialogVisible"
                  @closed="closeDialog"
                >
                  <h3>{{ hotVideoPath }}</h3>

                  <video
                    width="100%"
                    autoplay="autoplay"
                    :src="playvideo"
                    :poster="playvideo"
                    controls="controls"

                    id="video"
                    preload
                  ></video>
                </el-dialog>
                <!-- 页面table显示的video标签 -->
                <video
                  :src="scope.row.hotVideoPath"
                  width="100"
                  preload
                ></video>
                <i
                  class="el-icon-video-play playIcon"
                  @click="handleCheck(scope.row)"
                ></i>
              </div>
            </template>
          </el-table-column>

在data 的retrun里面设置

 dialogVisible: false, // 视频播放弹窗
 playvideo: null, // 存储用户点击的视频播放链接
 playvideoName: null, // 存储正在播放视频的名称

点击的事件（在methods里面添加以下方法）

// 查看
    handleCheck(row) {
      this.playvideo = row.hotVideoPath // 存储用户点击的视频播放链接
      this.playvideoName = row.hotVideoPath // 存储用户点击的视频播放链接
      this.dialogVisible = true
    },

hotVideoPath 是你表格赋值的视频路径