feat(ads/compliance/tencent): 优化视频预览展示效果
将原先的播放图标预览替换为视频缩略图预览,添加播放遮罩层并优化 hover 交互效果,无预览地址时仍显示原播放图标
This commit is contained in:
@@ -142,7 +142,18 @@
|
|||||||
<el-table-column label="预览" width="220">
|
<el-table-column label="预览" width="220">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div class="video-preview" @click="previewMedia(scope.row.previewUrl, 'video')">
|
<div class="video-preview" @click="previewMedia(scope.row.previewUrl, 'video')">
|
||||||
<el-icon><VideoPlay style="font-size: 32px" /></el-icon>
|
<video
|
||||||
|
v-if="scope.row.previewUrl"
|
||||||
|
:src="scope.row.previewUrl"
|
||||||
|
class="video-thumbnail"
|
||||||
|
poster="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||||
|
preload="metadata"
|
||||||
|
@loadedmetadata="(e) => ((e.target as HTMLVideoElement).currentTime = 0)"
|
||||||
|
></video>
|
||||||
|
<el-icon v-else><VideoPlay style="font-size: 32px" /></el-icon>
|
||||||
|
<div class="play-overlay">
|
||||||
|
<el-icon><VideoPlay style="font-size: 24px" /></el-icon>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
@@ -876,6 +887,38 @@ onMounted(() => {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-thumbnail {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-preview:hover .play-overlay {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-preview:not(:hover) .play-overlay {
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description-text {
|
.description-text {
|
||||||
|
|||||||
Reference in New Issue
Block a user