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

This commit is contained in:
al 2024-11-06 11:52:28 +08:00
parent 1413751c95
commit e01fbaa9af
2 changed files with 67 additions and 25 deletions

View File

@ -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.addEventListener("loadeddata", function () {
videoD.pause();
videoD.currentTime = 1;
});
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);
// videoD.src = url;
getVideoBase64(url).then((src) => {
setFrameImage((old) => ({ ...old, src }));
setFilesUrls([src]);
});
};
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>
);
}

View File

@ -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();
});
});
}