修复上传视频自动播放问题

components/UploadImgs/index.js

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import { DotLoading, Image, Toast, ImageViewer, Modal } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAdd, faClose, faPlay } from "@fortawesome/free-solid-svg-icons";
+import { getVideoBase64 } from "@/utils/tools";
 export default function UploadImgs({
   assets,
   getImgs,
@@ -86,7 +87,7 @@ export default function UploadImgs({
     } else {
       Modal.show({
         content: (
-          <video autoPlay>
+          <video autoPlay playsInline controls muted={true}>
             <source src={videoUrl} />
           </video>
         ),
@@ -100,27 +101,15 @@ export default function UploadImgs({
   };
   const creatVideoCanvas = (file) => {
     if (typeof window == "undefined") return;
-    const videoD = document.getElementById("video_upload");
+    // const videoD = document.getElementById("video_upload");
     const url = URL.createObjectURL(file);
-    videoD.src = url;
+    // videoD.src = url;
-    videoD.addEventListener("loadeddata", function () {
+    getVideoBase64(url).then((src) => {
-      videoD.pause();
+      setFrameImage((old) => ({ ...old, src }));
-      videoD.currentTime = 1;
+      setFilesUrls([src]);
-    });
-    videoD.addEventListener("seeked", function () {
-      const canvas = document.createElement("canvas");
-      canvas.width = videoD.videoWidth;
-      canvas.height = videoD.videoHeight;
-      canvas
-        .getContext("2d")
-        .drawImage(videoD, 0, 0, canvas.width, canvas.height);
-      const canvasImg = canvas.toDataURL("image/png");
-      setFrameImage((old) => ({ ...old, src: canvasImg }));
-      setFilesUrls([canvasImg]);
-      // 释放URL对象
-      URL.revokeObjectURL(url);
     });
   };
+
   return (
     <div>
       <div className="grid grid-cols-4 gap-1">
@@ -189,12 +178,6 @@ export default function UploadImgs({
           </>
         )}
       </div>
-      <div className="hidden">
-        <video id="video_upload" controls autoPlay name="media">
-          <source />
-          您的浏览器不支持 Video 标签。
-        </video>
-      </div>
     </div>
   );
 }

utils/tools.js

@@ -92,3 +92,62 @@ export function utf8Length(str) {
   }
   return length;
 }
+
+export function getVideoBase64(url) {
+  return new Promise((resolve, reject) => {
+    // 创建 video 元素
+    const video = document.createElement("video");
+    // 设置跨域属性
+    video.crossOrigin = "anonymous";
+    // 设置视频 URL
+    video.src = url;
+    // 设置视频画面宽度
+    video.width = "90";
+    // 设置视频画面高度
+    video.height = "90";
+    // 设置视频播放位置为第一帧
+    video.currentTime = 1;
+    // 设置预加载方式为自动加载
+    video.preload = "auto";
+
+    // 创建 canvas 元素
+    const canvas = document.createElement("canvas");
+    // 将 canvas 的宽度和高度设置为视频画面的宽度和高度
+    canvas.width = video.width;
+    canvas.height = video.height;
+
+    // 判断是否为 iOS 系统
+    if (/(iPad|iPhone|iPod)/gi.test(navigator.userAgent)) {
+      // 在 iOS 系统中，需要手动触发视频加载，然后设置自动播放和静音属性
+      video.load();
+      // video.autoplay = true;
+
+      // 在 iOS 系统中，监听 loadedmetadata 事件可以保证视频数据已经全部加载完毕
+    }
+    video.muted = true;
+    video.addEventListener("loadeddata", function () {
+      setTimeout(function () {
+        console.log("监听到了listen:", "loadeddata");
+        canvas
+          .getContext("2d")
+          .drawImage(video, 0, 0, canvas.width, canvas.height); //绘制canvas
+        const dataURL = canvas.toDataURL("image/jpeg"); //转换为base64
+        video.setAttribute("poster", dataURL);
+        console.log(dataURL, "dataURL");
+        resolve(dataURL);
+
+        // 清除内存
+        canvas.remove();
+        video.remove();
+      }, 100);
+    });
+
+    // 监听视频事件，在发生错误时 Promise 会 reject
+    video.addEventListener("error", function () {
+      reject(new Error("视频加载错误"));
+      // 清除内存
+      canvas.remove();
+      video.remove();
+    });
+  });
+}