ソースを参照

处理大文件视频上传,偶发性截图截取不到问题

yjwang 4 日 前
コミット
f4e276631c
1 ファイル変更75 行追加2 行削除
  1. 75 2
      src/views/course/videoResource/index.vue

+ 75 - 2
src/views/course/videoResource/index.vue

@@ -1046,9 +1046,82 @@ export default {
     },
     //获取第一帧封面
     async getFirstThumbnail(file, form){
-      getThumbnail(file).then(response => {
+      try {
+        //截取小文件
+        const clippedBlob = await this.clipVideoFirstTwoSeconds(file);
+
+        const clippedFile = new File([clippedBlob], 'clipped_video.mp4', {
+          type: 'video/mp4',
+          lastModified: Date.now()
+        });
+        console.log("调用请请求---------------》",response)
+        // 3. 调用接口获取封面
+        const response = await getThumbnail(clippedFile);
+        console.log("获取封面请求---------------》",response)
         form.thumbnail = response.url;
-      })
+      } catch (error) {
+        console.error('获取封面失败:', error);
+      }
+    },
+    //截取大文件视频
+    clipVideoFirstTwoSeconds(file) {
+      return new Promise((resolve, reject) => {
+        // 创建视频元素用于处理
+        const video = document.createElement('video');
+        video.src = URL.createObjectURL(file);
+        video.crossOrigin = 'anonymous';
+        video.preload = 'metadata';
+
+        // 视频元数据加载完成后开始处理
+        video.onloadedmetadata = async () => {
+          try {
+            // 计算截取时长
+            const duration = Math.min(1, video.duration);
+
+            // 直接从视频元素捕获流
+            const stream = video.captureStream();
+
+            // 创建 MediaRecorder 录制截取的片段
+            const mediaRecorder = new MediaRecorder(stream);
+            const chunks = [];
+
+            // 收集录制的视频数据
+            mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
+
+            // 录制结束后处理结果
+            mediaRecorder.onstop = () => {
+              // 合并数据为 Blob(MP4 格式)
+              const blob = new Blob(chunks, { type: 'video/mp4' });
+              resolve(blob);
+
+              // 清理资源
+              URL.revokeObjectURL(video.src);
+              stream.getTracks().forEach(track => track.stop());
+            };
+
+            // 开始录制
+            mediaRecorder.start();
+
+            // 播放视频并在指定时间后停止录制
+            video.currentTime = 0; // 从开头开始
+            video.play();
+
+            // 到达截取时长后停止录制
+            setTimeout(() => {
+              video.pause();
+              mediaRecorder.stop();
+            }, duration * 1000); // 转换为毫秒
+
+          } catch (error) {
+            reject(new Error('视频截取失败: ' + error.message));
+          }
+        };
+
+        // 视频加载错误处理
+        video.onerror = () => {
+          reject(new Error('视频加载失败,请检查文件格式'));
+        };
+      });
     },
     //上传腾讯云Pcdn
     async uploadVideoToTxPcdn(file, form, onProgress) {