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

最新推荐文章于 2023-12-17 17:39:43 发布

HikL[爱心]

最新推荐文章于 2023-12-17 17:39:43 发布

阅读量3.3k

点赞数 4

分类专栏： dialog 文章标签： vue

本文链接：https://blog.youkuaiyun.com/adadfss/article/details/116783756

版权

dialog 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何在Vue的表格组件中展示视频，并实现点击后弹出视频播放的功能。通过使用Element UI的el-dialog组件和video标签，结合事件处理方法handleCheck()，实现了视频路径的传递和播放。内容涵盖了表格列渲染、视频播放控制以及对话框的显示与关闭逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
    },