elementui视频预览

### 如何在 ElementUI 中实现视频预览功能

为了实现在 Vue 项目中使用 ElementUI 组件库来完成视频文件的预览，可以通过自定义组件的方式处理不同类型的媒体资源。下面介绍一种方法，即通过 `el-dialog` 对话框结合 HTML 的 `<video>` 标签来达到目的。

#### 创建 VideoPreviewDialog.vue 自定义对话框组件

此组件用于接收外部传递过来的视频 URL 并将其嵌入到播放器内：

<template>
  <el-dialog :visible.sync="dialogVisible" width="80%">
    <!-- 视频播放区域 -->
    <div v-if="videoUrl">
      <video controls autoplay style="width:100%;height:auto;">
        <source :src="videoUrl" type="video/mp4"/>
        浏览器不支持 video 标签。
      </video>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ['url'],
  data() {
    return {
      dialogVisible: false,
      videoUrl: ''
    };
  },
  watch: {
    url(newVal) {
      this.videoUrl = newVal;
      this.dialogVisible = true; // 显示弹窗
    }
  }
};
</script>

#### 在父级组件调用 VideoPreviewDialog.vue

当用户点击某个链接或按钮触发事件时打开上述创建好的视频预览窗口，并传入相应的视频地址作为参数给子组件：

<!-- ParentComponent.vue -->
<template>
  ...
  <button @click="handleVideoClick">点击查看视频</button>
  
  <!-- 引入刚才编写的视频预览组件 -->
  <VideoPreviewDialog ref="videoPreviewRef"></VideoPreviewDialog>
  ...
</template>

<script>
import VideoPreviewDialog from './components/VideoPreviewDialog';

export default {
  components: { VideoPreviewDialog },

  methods: {
    handleVideoClick() {
      const videoPath = 'https://example.com/path/to/video.mp4';
      
      // 调用子组件实例上的 open 方法并传参
      this.$refs['videoPreviewRef'].$emit('update:url', videoPath);
    }
  }
}
</script>

这种方法不仅适用于 MP4 类型的视频文件，还可以根据实际需求调整为其他格式的支持[^1]。