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 是你表格賦值的視頻路徑