前端js获取视频宽高比例

大概思路就是创建一个看不见的video标签，然后监听canplay事件获取视频实际宽高，然后除以最大公约数即为宽高比

// 获取最大公约数
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)
        }
    }

    async function getVideoScale(url) {
        const video = document.createElement('video');
        video.setAttribute("width", "10");
        video.setAttribute("height", "10");
        video.setAttribute("style", "position: absolute;opacity: 0;z-index: -5;top: 0;");
        video.setAttribute("src", url);
        
        document.body.appendChild(video);

        const p = new Promise(function(resolve, reject) {
            video.addEventListener('canplay', function(e) {
                const gcd = getGcd(e.target.videoWidth, e.target.videoHeight);
                resolve([e.target.videoWidth / gcd, e.target.videoHeight / gcd])
            } )
        })
        const res = await p;
        document.body.removeChild(video);
        return res
    }
    
    getVideoScale('https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4').then(res => {
        console.log(res)
    })