js获取未加载视频的尺寸

需求背景:在正在进行的项目中需要对手机上的游戏视频进行展示,问题在于视频有横屏和竖屏两种,这取决于你咋玩这款游戏(比如:吃鸡、王者农药的录屏是横屏视频;跳一跳、神庙逃亡等则为竖屏视频)

如下图:横屏则不需要处理,width,height 100%打满即可,竖屏就比较鸡肋了,需要首先拿到width、height的值进行比较,然后定位video(背景图片设置filter: blur(3px))


解决方案:

html
css


利用异步的方式返回width和height,好处就是可以你需要的任何地方随时调用,解耦!

以上代码的意思大概就是:点击playicon标签,通过异步函数获取传入视频链接的尺寸进行判断

如果width < height  就判为竖屏、否则为横屏

参考链接:https://stackoverflow.com/questions/4129102/html5-video-dimensions

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,123评论 3 119
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,545评论 1 45
  • 给大家介绍过了研究生院的基本概貌之后,我还想以个人的身份,给各位2016级研究生的分享几点我的学习体会。 第一,练...
    黄虎阅读 1,064评论 11 7
  • 2014年的一个夏天,我们在厦门。 在那之前我们认识了两年,每天都见面,早中晚也在一起,都能看见。我们是同事。宿舍...
    张小橘阅读 290评论 0 1
  • 《第308期六项精进》 姓名:彭万红 【日精进打卡第38天—2017年11月26日】 公司:广东顺创律师事务所 企...
    1b5f4a5ab414阅读 154评论 0 0

友情链接更多精彩内容