47d8d921 by yzj

开机视频显示

1 parent cfb2ad91
......@@ -37,7 +37,21 @@
</el-table-column>
<el-table-column :label="$t('advertisement.tablePhotoName')" >
<template #default="{ row }">
<el-image style="width: 100px; height: 100px" :src="row.ossUrl" />
<!-- 判断是否为视频类型 -->
<component
:is="isVideo(row.ossUrl) ? 'video' : 'el-image'"
:src="row.ossUrl"
style="width: 100px; height: 100px"
v-if="!isVideo(row.ossUrl)"
/>
<video
v-else
:src="row.ossUrl"
style="width: 100px; height: 100px"
@loadedmetadata="generateThumbnail($event, row)"
>
<canvas ref="canvas"></canvas>
</video>
</template>
</el-table-column>
<el-table-column :label="$t('advertisement.tableStateName')" prop="status">
......@@ -100,7 +114,13 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('advertisement.tablePhotoName')" label-width="80">
<imageUpload v-model="showForm.form.ossId" :limit='1' :fileType='["png", "jpg", "jpeg", "ico","mp4"]'/>
<!-- 添加条件判断,根据 dict.value 动态选择组件 -->
<component
:is="showForm.form.type === '3' ? 'fileUpload' : 'imageUpload'"
v-model="showForm.form.ossId"
:limit='1'
:fileType='["png", "jpg", "jpeg", "ico","mp4"]'
/>
</el-form-item>
<el-form-item :label="$t('advertisement.tableSortName')" label-width="80">
<el-input-number v-model="showForm.form.sort" controls-position="right" :min="0" />
......@@ -246,4 +266,22 @@ function closeDialog() {
form: {}
}
}
// 判断是否为视频文件
function isVideo(url) {
const videoExtensions = ['mp4'];
const extension = url.split('.').pop().toLowerCase();
return videoExtensions.includes(extension);
}
// 生成视频封面
function generateThumbnail(event, row) {
const video = event.target;
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
row.thumbnail = canvas.toDataURL();
}
</script>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!