React+Upload实现视频上传获取视频的时长秒数

最近有个需求要获取到上传的视频的时长，然后根据时长去判断一系列等操作，upload原生的上传成功打印出来的里面好像没有视频时长的参数，所以自己写记录一下吧👇

这里我是利用HTML5 video元素来获取上传视频的持续时间，而不需要使用任何额外的插件，在这个demo中，beforeUpload函数检查上传的文件是否是mp4视频。如果是，则在文件状态为“done”时触发handleChange函数。在handleChange内部，一个动态创建的HTML5 video元素用于获取视频持续时间。

注意:HTML5视频元素可能无法在某些环境下工作(例如：服务器端渲染或无头浏览器环境)，在这种情况下，可能需要使用额外的库或服务来获取视频持续时间（例如：flv.js）

import React, { useState } from "react";
import { Upload, Button, message } from "antd";
import { UploadOutlined } from "@ant-design/icons";

const VideoUpload = () => {
  const [videoDuration, setVideoDuration] = useState(null);

  const beforeUpload = (file) => {
    const isMp4 = file.type === "video/mp4";
    if (!isMp4) {
      message.error("只能上传 MP4 格式的视频!");
    }
    return isMp4;
  };

  const handleChange = (info) => {
    if (info.file.status === "done") {
      // 使用HTML5 video元素获取视频时长
      const video = document.createElement("video");
      video.preload = "metadata";
      video.onloadedmetadata = () => {
        // 获取视频时长
        const duration = video.duration;
        setVideoDuration(duration);
      };
      video.src = URL.createObjectURL(info.file.originFileObj);
    }
  };

  return (
    <div>
      <Upload
        beforeUpload={beforeUpload}
        onChange={handleChange}
        showUploadList={false}
        accept=".mp4"
      >
        <Button icon={<UploadOutlined />}>上传视频</Button>
      </Upload>
      {videoDuration !== null && (
        <p>上传视频的时长为: {Math.round(videoDuration)} 秒</p>
      )}
    </div>
  );
};

export default VideoUpload;