Vue+element-ui，实现表格渲染缩略图，鼠标悬浮缩略图放大，点击缩略图播放视频（一）

前言

如标题，需要实现这样的业务
此处文章所实现的，是静态视频资源。
注意打包方式（关系路径写法）：

1. 现代打包项目（Vue/React）：
   /favicon.ico 直接引用 public 目录资源
2. 传统静态项目：
   ../public/favicon.ico（../表示返回上一路径）

整体代码

template

<el-table-column
  label="操作"
  align="center"
  class-name="small-padding fixed-width"
  width="310px"
>
  <template slot-scope="scope">
    <template v-if="scope.row.callType === 0">
      <audio
        :id="'audio-' + scope.row.sipCallId"
        controls
        :src="scope.row.audioUrl"
        @play="loadAudio(scope.row)"
        preload="none"
      >
        浏览器不支持播放
      </audio>
    </template>
    <template v-else>
      <!--    视频播放      -->
      <el-popover trigger="hover" placement="right">
        <img
          slot="reference"
          src="/test(1).png"
          alt="加载失败"
          class="image"
          style="width: 80px;height: 80px"
          @error="handleImageError"
        />
        <div class="video-wrapper" @mouseleave="closeVideo">
          <video
            controls
            src="/test.mp4"
            @play=""
            @pause="videoPause()"
            @ended="videoEnded()"
            poster="/test(1).png"
            preload="none"
            style="width: 400px;height:400px;background-color: rgba(0,0,0,0.18)"
            ref="videoRef"
          ></video>
          <div class="video-overlay" v-if="videoOverlayFlag">
            <div class="play-button" @click="handlePlay">
              {{ videoPlayTitle ? '暂停' : '播放' }}
            </div>
          </div>
        </div>
      </el-popover>
    </template>
  </template>
</el-table-column>

data()

videoPlayTitle: false,
videoOverlayFlag: true,

method()

    closeVideo() {
      const video = this.$refs.videoRef;
      video.pause()
    },
    videoEnded() {
      this.videoOverlayFlag = true
      this.videoPlayTitle = false;
    },
    videoPause() {
      this.videoOverlayFlag = true
      this.videoPlayTitle = true;
    },
    handlePlay() {
      const video = this.$refs.videoRef;
      video.play().then(() => {
        this.videoOverlayFlag = false;
        this.videoPlayTitle = false;
      }).catch(error => {
        this.videoOverlayFlag = true
        this.videoPlayTitle = false;
      });
    },
    handleImageError(event) {
      event.target.src = '/test(1).png'; // 加载失败时显示的图片
    },
    formatCallType(type) {
      return type === 0 ? '语音' : type === 1 ? '视频' : '未知';
    },

css

<style rel="stylesheet/scss" lang="scss">

//全屏按钮
video::-webkit-media-controls-fullscreen-button {
  display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {
  display: none;
}

.video-wrapper {
  position: relative;
  display: inline-block;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 240, 0.3); /* 半透明乳白色遮罩 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.play-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
</style>

预览图

具体分析

基础结构

<el-table-column>
  <template slot-scope="scope">
    <template v-if="scope.row.callType === 0">
      <audio></audio>
    </template>
    <template v-else>
      <el-popover trigger="hover" placement="right">
        <img/>
        <div class="video-wrapper" @mouseleave="closeVideo">
          <video></video>
          <div class="video-overlay" v-if="videoOverlayFlag">
            <div class="play-button" @click="handlePlay">
              {{ videoPlayTitle ? '暂停' : '播放' }}
            </div>
          </div>
        </div>
      </el-popover>
    </template>
  </template>
</el-table-column>

主要标签作用

video

实现视频播放，使用的是原生的video标签

el-popover