前端js获取视频宽高比例

╰+攻爆jí腚メ 2022-11-09 14:22 715阅读 0赞

大概思路就是创建一个看不见的`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)
        })

发表评论取消回复

表情：

评论列表（有 0 条评论，715人围观）

还没有评论，来说两句吧...

相关阅读

相关前端js获取视频宽高比例

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

╰+攻爆jí腚メ/ 2022年11月09日 14:22/ 0 赞/ 716 阅读

相关 CSS之宽高比例布局

在某些特定的场景中，如视频播放、可视化图表占位等一些高宽需要固定的比例。如果占位区间是由固定值确定，那么我们皆大欢喜，但在目前的的应用发展中宽高自适应的方式才能满足我们的需求，

向右看齐/ 2022年10月01日 08:57/ 0 赞/ 226 阅读

相关 js获取图片宽高

原文链接：http://www.qttc.net/201304304.html 快速获取图片的宽高其实是为了预先做好排版样式布局做准备，通过快速获取图片宽高的方法比onloa

港控/mmm°/ 2022年08月18日 02:59/ 0 赞/ 282 阅读

相关 js获取屏幕（设备）宽高

<script language="javascript"> var h = ""; h += " 网页可见区域宽："+ document.body.c

傷城~/ 2022年08月02日 12:56/ 0 赞/ 196 阅读

相关 js获取img宽高

知识点1 如果写了var img = new Image（100 ，100）， img.src = ‘1.png’ ，这样的作用是可以把img缓存到浏览器中，常用来做图片

蔚落/ 2022年07月12日 05:09/ 0 赞/ 311 阅读

相关 js获取img宽高

知识点1 如果写了var img = new Image（100 ，100）， img.src = ‘1.png’ ，这样的作用是可以把img缓存到浏览器中，常用来做图片

痛定思痛。/ 2022年07月12日 05:09/ 0 赞/ 217 阅读

相关 js获取原生图片的宽高

var myimage=http://baidu.com/img/data/upload/admin/5a321e69ab0db.jpg;

- 日理万妓/ 2022年06月03日 01:42/ 0 赞/ 279 阅读

相关 JS获取屏幕的宽高。

[JS获取屏幕的宽高。][JS] <html> <script> function a()\{ document.write( "屏幕分辨率为："+scr

谁借莪１个温暖的怀抱￠/ 2022年05月06日 13:46/ 0 赞/ 268 阅读

相关 js/jq 获取网页宽高

js获取网页宽高 document.body.clientWidth // BODY对象宽度 document.body.clientHeight

喜欢ヅ旅行/ 2022年04月05日 12:08/ 0 赞/ 318 阅读

相关 js获取宽高

引用自[https://www.cnblogs.com/chengzp/p/cssbox.html][https_www.cnblogs.com_chengzp_p_cssb

短命女/ 2021年10月23日 14:30/ 0 赞/ 395 阅读