修复上传视频自动播放问题
This commit is contained in:
parent
1413751c95
commit
e01fbaa9af
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue