开机视频显示
Showing
1 changed file
with
40 additions
and
2 deletions
| ... | @@ -37,7 +37,21 @@ | ... | @@ -37,7 +37,21 @@ |
| 37 | </el-table-column> | 37 | </el-table-column> |
| 38 | <el-table-column :label="$t('advertisement.tablePhotoName')" > | 38 | <el-table-column :label="$t('advertisement.tablePhotoName')" > |
| 39 | <template #default="{ row }"> | 39 | <template #default="{ row }"> |
| 40 | <el-image style="width: 100px; height: 100px" :src="row.ossUrl" /> | 40 | <!-- 判断是否为视频类型 --> |
| 41 | <component | ||
| 42 | :is="isVideo(row.ossUrl) ? 'video' : 'el-image'" | ||
| 43 | :src="row.ossUrl" | ||
| 44 | style="width: 100px; height: 100px" | ||
| 45 | v-if="!isVideo(row.ossUrl)" | ||
| 46 | /> | ||
| 47 | <video | ||
| 48 | v-else | ||
| 49 | :src="row.ossUrl" | ||
| 50 | style="width: 100px; height: 100px" | ||
| 51 | @loadedmetadata="generateThumbnail($event, row)" | ||
| 52 | > | ||
| 53 | <canvas ref="canvas"></canvas> | ||
| 54 | </video> | ||
| 41 | </template> | 55 | </template> |
| 42 | </el-table-column> | 56 | </el-table-column> |
| 43 | <el-table-column :label="$t('advertisement.tableStateName')" prop="status"> | 57 | <el-table-column :label="$t('advertisement.tableStateName')" prop="status"> |
| ... | @@ -100,7 +114,13 @@ | ... | @@ -100,7 +114,13 @@ |
| 100 | </el-select> | 114 | </el-select> |
| 101 | </el-form-item> | 115 | </el-form-item> |
| 102 | <el-form-item :label="$t('advertisement.tablePhotoName')" label-width="80"> | 116 | <el-form-item :label="$t('advertisement.tablePhotoName')" label-width="80"> |
| 103 | <imageUpload v-model="showForm.form.ossId" :limit='1' :fileType='["png", "jpg", "jpeg", "ico","mp4"]'/> | 117 | <!-- 添加条件判断,根据 dict.value 动态选择组件 --> |
| 118 | <component | ||
| 119 | :is="showForm.form.type === '3' ? 'fileUpload' : 'imageUpload'" | ||
| 120 | v-model="showForm.form.ossId" | ||
| 121 | :limit='1' | ||
| 122 | :fileType='["png", "jpg", "jpeg", "ico","mp4"]' | ||
| 123 | /> | ||
| 104 | </el-form-item> | 124 | </el-form-item> |
| 105 | <el-form-item :label="$t('advertisement.tableSortName')" label-width="80"> | 125 | <el-form-item :label="$t('advertisement.tableSortName')" label-width="80"> |
| 106 | <el-input-number v-model="showForm.form.sort" controls-position="right" :min="0" /> | 126 | <el-input-number v-model="showForm.form.sort" controls-position="right" :min="0" /> |
| ... | @@ -246,4 +266,22 @@ function closeDialog() { | ... | @@ -246,4 +266,22 @@ function closeDialog() { |
| 246 | form: {} | 266 | form: {} |
| 247 | } | 267 | } |
| 248 | } | 268 | } |
| 269 | |||
| 270 | // 判断是否为视频文件 | ||
| 271 | function isVideo(url) { | ||
| 272 | const videoExtensions = ['mp4']; | ||
| 273 | const extension = url.split('.').pop().toLowerCase(); | ||
| 274 | return videoExtensions.includes(extension); | ||
| 275 | } | ||
| 276 | |||
| 277 | // 生成视频封面 | ||
| 278 | function generateThumbnail(event, row) { | ||
| 279 | const video = event.target; | ||
| 280 | const canvas = document.createElement('canvas'); | ||
| 281 | canvas.width = video.videoWidth; | ||
| 282 | canvas.height = video.videoHeight; | ||
| 283 | const ctx = canvas.getContext('2d'); | ||
| 284 | ctx.drawImage(video, 0, 0, canvas.width, canvas.height); | ||
| 285 | row.thumbnail = canvas.toDataURL(); | ||
| 286 | } | ||
| 249 | </script> | 287 | </script> | ... | ... |
-
Please register or sign in to post a comment