ソースを参照

处理视频封面

yangg 2 ヶ月 前
コミット
5c296094cf
2 ファイル変更19 行追加9 行削除
  1. 1 0
      .env.development
  2. 18 9
      src/views/JobApplication/report/index.vue

+ 1 - 0
.env.development

@@ -1,6 +1,7 @@
 # 本地环境
 ENV = 'development'
 #https://minlong.raycos.com.cn
+#线下:http://192.168.66.187:8083
 # 本地环境接口地址 121.36.251.245
 VITE_API_URL = 'http://192.168.66.187:8083'
 

+ 18 - 9
src/views/JobApplication/report/index.vue

@@ -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>