原生js实现上传视频/音频获取尺寸宽高 、视频时长、尺寸比例及分辨率

1.使用onchange方法进行获取上传内容

     <input type="file" onchange="changeFile(event)" />

2.在js中定义onchange方法

由于 checkSizes 是延迟执行所以需要同步

      async function changeFile(e) {
            console.log(e)
            let files = e.target.files
            console.log(files)
            // await checkSize(files,true--> 为音频是使用 默认为false), '返回值、里面有 （尺寸宽 --- 分辨率） 尺寸高 视频时长 1 表示1秒   尺寸比例 [16,9]'; 
            let checkSizes
            if (files[0].type == "audio/mpeg") {
                checkSizes = await checkSize(files, true)

            } else if (files[0].type == "video/mp4") {
                checkSizes = await checkSize(files)
            }
            console.log(checkSizes)
            if (checkSizes.duration > 300) {
                console.log('视频上传时间不能大于1分钟')
                return
            }
            if(checkSizes.videoWidth!='1280'){
                console.log('只能视频上分辨率为720')
                return
            }
            if(checkSizes.ccbl.join(':')!='16:9'){
                console.log('上传尺寸为16:9的视频')
                return
            }
            console.log(files, '上传成功')
        }

3.创建虚拟dom 并且放回对应的值

        let checkSize = async (files, isVideo) => {
            if (!files || !files[0]) return false
            const checktimevideo = document.getElementById('checktimevideo')
            if (checktimevideo) {
                document.body.removeChild(checktimevideo)
            }
            let doms
            if (!isVideo) {
                doms = document.createElement('video')
            } else {
                doms = document.createElement('audio')
            }
            const url = URL.createObjectURL(files[0])
            console.log(url)
            doms.src = url
            doms.id = 'checktimevideo'
            doms.style.display = 'none'
            document.body.appendChild(doms)
            return await gettime(doms);
        }

4.由于loadedmetadata 是异步代码所以需要promise进行封装转换为同步代码执行

       let gettime = (doms) => {
             // 由于loadedmetadata 是异步代码所以需要promise进行封装转换为同步代码执行
            const promise = new Promise(resolve => {
                doms.addEventListener('loadedmetadata', e => {
                    const gcd = getGcd(e.target.videoWidth, e.target.videoHeight);
                    console.log(gcd)
                    let obj = {
                        videoWidth: doms.videoWidth, // 尺寸宽 --- 分辨率
                        videoHeight: doms.videoHeight, // 尺寸高
                        duration: e.target.duration, // 视频时长 1表示一秒
                        ccbl:[e.target.videoWidth / gcd, e.target.videoHeight / gcd] // 计算尺寸比例
                    }
                    resolve(obj)
                })
            })
            return promise
        }

5.由于计算尺寸比例需要使用到最大公约数进行计算

        // 获取最大公约数
        function getGcd(a, b) {
            let n1, n2;
            if (a > b) {
                n1 = a;
                n2 = b;
            } else {
                n1 = b;
                n2 = a;
            }
            let remainder = n1 % n2;
            if (remainder === 0) {
                return n2;
            } else {
                return getGcd(n2, remainder)
            }
        }