JS获取video,img的真实宽高

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) // 拿到图片的真实宽高
}

qq群:306671879 一起努力

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值