本文作者:DurkBlue

JS获取video,img的真实宽高的讲解推荐

DurkBlue 2023-05-08 679 抢沙发
JS获取video,img的真实宽高的讲解摘要: JS获取video,img的真实宽高video<video src="./1.mp4" id="video">...

JS获取video,img的真实宽高
video

<video src="./1.mp4" id="video"></video> // html
const video = document.getElementById('video')
 video.addEventListener('canplay', function (e) {
    console.log(e.target.videoWidth);
    console.log(e.target.videoHeight);
 })

canplay 事件,视频达到可以播放时触发;

videoWidth 和 videoHeight 属性为视频真实宽高,这两个属性为只读属性,赋值不会生效;

width 和 height 属性为视频在页面上显示的尺寸,可以在元素设置或JS赋值;

width 和 height 属性优先级低于样式,同时使用样式和属性设置宽高,最后生效的是样式;



img


var img = new Image()

img.src = "" // 这里将想要获得的真实宽高的图片地址赋值给img.src

img.onload = function(){

  console.log(img.width,img.height) // 拿到图片的真实宽高

}


此篇文章由DurkBlue发布,转载一下需要注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2023-05-08
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,679人围观)参与讨论

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