|
@@ -478,7 +478,7 @@ const handleImageError = (event: Event) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 添加视频加载和第一帧捕获的函数
|
|
|
+// 修改视频加载和第一帧捕获的函数
|
|
|
const captureVideoFirstFrame = (videoElement: HTMLVideoElement) => {
|
|
|
// 创建一个一次性的事件监听器,在视频可以播放时捕获第一帧
|
|
|
const captureFrame = () => {
|
|
@@ -493,6 +493,10 @@ const captureVideoFirstFrame = (videoElement: HTMLVideoElement) => {
|
|
|
// 在canvas上绘制视频当前帧
|
|
|
const ctx = canvas.getContext('2d')
|
|
|
if (ctx) {
|
|
|
+ // 确保视频当前时间设置为开始位置
|
|
|
+ videoElement.currentTime = 0.1
|
|
|
+
|
|
|
+ // 绘制视频帧到canvas
|
|
|
ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height)
|
|
|
|
|
|
// 将canvas转换为图片URL
|
|
@@ -538,7 +542,15 @@ const captureVideoFirstFrame = (videoElement: HTMLVideoElement) => {
|
|
|
const handleVideoLoaded = (event: Event) => {
|
|
|
const videoElement = event.target as HTMLVideoElement
|
|
|
if (videoElement) {
|
|
|
- captureVideoFirstFrame(videoElement)
|
|
|
+ // 确保视频已经加载元数据
|
|
|
+ if (videoElement.readyState >= 1) {
|
|
|
+ captureVideoFirstFrame(videoElement)
|
|
|
+ } else {
|
|
|
+ // 如果元数据尚未加载,添加元数据加载事件
|
|
|
+ videoElement.addEventListener('loadedmetadata', () => {
|
|
|
+ captureVideoFirstFrame(videoElement)
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -665,7 +677,6 @@ const handleVideoError = (event: Event) => {
|
|
|
<p class="text-gray-600 mt-2">答案:{{ record.answer }}</p>
|
|
|
<p class="text-gray-500 mt-2 text-sm" v-if="record.question_form === 0">分析:{{ record.analysis }}</p>
|
|
|
|
|
|
- <!-- 视频回放 -->
|
|
|
<div v-if="record.videoUrl" class="mt-4">
|
|
|
<div class="video-container">
|
|
|
<video
|
|
@@ -673,12 +684,11 @@ const handleVideoError = (event: Event) => {
|
|
|
controls
|
|
|
:src="record.videoUrl"
|
|
|
preload="metadata"
|
|
|
- :poster="record.thumbnail || fallbackImageBase64Ref"
|
|
|
+ :poster="fallbackImageBase64Ref"
|
|
|
@loadeddata="handleVideoLoaded"
|
|
|
@error="handleVideoError"
|
|
|
>
|
|
|
- <!-- <source src="http://121.36.251.245:9000/minlong/tenant_1/general_uploads/d9082487afc4499c97407aa3cebd1923.jpeg" type="video/mp4">
|
|
|
- 您的浏览器不支持视频播放。 -->
|
|
|
+ 您的浏览器不支持视频播放。
|
|
|
</video>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -709,12 +719,11 @@ const handleVideoError = (event: Event) => {
|
|
|
controls
|
|
|
:src="video.url"
|
|
|
preload="metadata"
|
|
|
- :poster="video.thumbnail || fallbackImageBase64Ref"
|
|
|
+ :poster="fallbackImageBase64Ref"
|
|
|
@loadeddata="handleVideoLoaded"
|
|
|
@error="handleVideoError"
|
|
|
>
|
|
|
- <!-- <source src="http://121.36.251.245:9000/minlong/tenant_1/general_uploads/d9082487afc4499c97407aa3cebd1923.jpeg" type="video/mp4">
|
|
|
- 您的浏览器不支持视频播放。 -->
|
|
|
+ 您的浏览器不支持视频播放。
|
|
|
</video>
|
|
|
</div>
|
|
|
<p class="text-sm text-gray-600 mt-2">{{ video.description }}</p>
|