React获取视频时长

import React, { useState } from "react";
import { Upload, Button } from 'antd';

const Uploads = () => {
    const [file, setFile] = useState({})
    //上传之前
    const beforeUpload = (file: any) => {
        console.log(file);
        setFile(file)
        return true;
    };

    const onFinish = () => {
        const url = window.URL.createObjectURL(file);
        //经测试，发现audio也可获取视频的时长
        const audioElement = new Audio(url);

        let duration;
        audioElement.addEventListener("loadedmetadata", function (_event) {
            duration = audioElement.duration;
            console.log(duration);
        });
    }
    return (
        

            
                上传
            
            
                同意协议并注册
            
        
    )
}

export default Uploads

　　其核心是在这块获取时长，当然，这块原生代码在vue中也可实现。

当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件，

音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。