Browse Source

解决执法端视频首帧

dev-V1.10.2-temp
wangmingyong@163.com 2 months ago
parent
commit
9f09e3a4fe
  1. 14
      zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/nos/components/NosDetailMaterialsTab.vue
  2. 17
      zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/nos/nosCloudRecord.vue

14
zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/nos/components/NosDetailMaterialsTab.vue

@ -26,7 +26,7 @@
<div class="material-media"> <div class="material-media">
<template v-for="(url, fileIndex) in item.itemValue" :key="fileIndex"> <template v-for="(url, fileIndex) in item.itemValue" :key="fileIndex">
<div v-if="isVideo(url)" class="media-item media-item--video" @click="onPreview(url, item.itemValue)"> <div v-if="isVideo(url)" class="media-item media-item--video" @click="onPreview(url, item.itemValue)">
<video :src="resolveMediaUrl(url)" muted preload="metadata" class="video-thumb"></video> <video :src="resolveMediaUrl(url)" muted preload="metadata" class="video-thumb" @loadedmetadata="onVideoLoadedMeta"></video>
<van-icon name="play-circle-o" class="play-icon" /> <van-icon name="play-circle-o" class="play-icon" />
</div> </div>
<div v-else-if="isPdf(url)" class="media-item media-item--pdf" @click="onPreview(url, item.itemValue)"> <div v-else-if="isPdf(url)" class="media-item media-item--pdf" @click="onPreview(url, item.itemValue)">
@ -226,6 +226,18 @@ const minDate = new Date()
const resolveMediaUrl = (url) => toFullFileUrl(url) const resolveMediaUrl = (url) => toFullFileUrl(url)
// 视频 metadata 加载后,seek 到 0.5s 跳过开头黑帧作为封面
const onVideoLoadedMeta = (e) => {
const v = e.target
if (!v || !isFinite(v.duration)) return
const target = Math.min(0.5, v.duration / 2)
try {
v.currentTime = target
} catch (err) {
// 忽略 seek 异常
}
}
const pickerDate = ref([String(minDate.getFullYear()), String(minDate.getMonth() + 1).padStart(2, '0'), String(minDate.getDate()).padStart(2, '0')]) const pickerDate = ref([String(minDate.getFullYear()), String(minDate.getMonth() + 1).padStart(2, '0'), String(minDate.getDate()).padStart(2, '0')])
const onAuditChange = (item) => { const onAuditChange = (item) => {

17
zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/nos/nosCloudRecord.vue

@ -1,6 +1,6 @@
<template> <template>
<div class="cloud-record-page app_content"> <div class="cloud-record-page app_content">
<van-nav-bar title="执法监督码" left-arrow @click-left="onBack" /> <!-- <van-nav-bar title="执法监督码" left-arrow @click-left="onBack" /> -->
<div class="cloud-record-body"> <div class="cloud-record-body">
<van-tabs <van-tabs
@ -29,7 +29,7 @@
<div class="section-card"> <div class="section-card">
<div class="section-title">云视频</div> <div class="section-title">云视频</div>
<div v-if="cloudVideo" class="video-wrap" @click="showVideoPreview = true"> <div v-if="cloudVideo" class="video-wrap" @click="showVideoPreview = true">
<video :src="cloudVideo" muted preload="metadata" class="video-thumb" /> <video :src="cloudVideo" muted preload="metadata" class="video-thumb" @loadedmetadata="onVideoLoadedMeta" />
<van-icon name="play-circle-o" class="play-icon" /> <van-icon name="play-circle-o" class="play-icon" />
</div> </div>
<div v-else class="media-placeholder">暂无视频</div> <div v-else class="media-placeholder">暂无视频</div>
@ -107,6 +107,19 @@ const applyDetailData = (data) => {
recordId.value = data.id || '' recordId.value = data.id || ''
} }
// 视频 metadata 加载后,seek 到 0.5s 跳过开头黑帧作为封面
const onVideoLoadedMeta = (e) => {
const v = e.target
if (!v || !isFinite(v.duration)) return
// 跳过开头黑帧:取 0.5s 与视频时长一半的较小值,避免短视频越界
const target = Math.min(0.5, v.duration / 2)
try {
v.currentTime = target
} catch (err) {
// 忽略 seek 异常
}
}
const fetchDetail = async () => { const fetchDetail = async () => {
const taskId = route.query.id const taskId = route.query.id
if (!taskId) { if (!taskId) {

Loading…
Cancel
Save