React获取视频时长

这几天遇到一个需求，上传mp4文件的时候需要获取一下视频的时长，超过一定限制前端做出限制，

结合网上的方案，写了一个获取上传的音视频文件时长的方法，具体代码如下

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

const Uploads = () => {
    const [file, setFile] = useState<any>({})
    //上传之前
    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 (
        <div>
            <Upload
                name="file"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                disabled={false}
                action="/api/img/upload"
                beforeUpload={beforeUpload}
            >
                <span className="upload-text">上传</span>
            </Upload>
            <Button
                type="primary"
                onClick={onFinish}
            >
                同意协议并注册
            </Button>
        </div>
    )
}

export default Uploads

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

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

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