美文网首页
js获取未加载视频的尺寸

js获取未加载视频的尺寸

作者: 示十 | 来源:发表于2018-07-09 17:17 被阅读0次

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

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

    解决方案:

    html css

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

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

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

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

    相关文章

      网友评论

          本文标题:js获取未加载视频的尺寸

          本文链接:https://www.haomeiwen.com/subject/wletpftx.html