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

前言

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

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

整体代码

template

<el-table-columnlabel="操作"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"><imgslot="reference"src="/test(1).png"alt="加载失败"class="image"style="width: 80px;height: 80px"@error="handleImageError"/><div class="video-wrapper" @mouseleave="closeVideo"><videocontrolssrc="/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 = truethis.videoPlayTitle = false;},videoPause() {this.videoOverlayFlag = truethis.videoPlayTitle = true;},handlePlay() {const video = this.$refs.videoRef;video.play().then(() => {this.videoOverlayFlag = false;this.videoPlayTitle = false;}).catch(error => {this.videoOverlayFlag = truethis.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