JS获取video真实宽高

为什么80%的码农都做不了架构师？>>>   

JS代码

var video = document.querySelector('video');
video.addEventListener('canplay', function () {
    this.width = this.videoWidth;
    this.height = this.videoHeight;
});

知识点

• canplay 事件，视频达到可以播放时触发；
• videoWidth 和 videoHeight 属性为视频真实宽高，这两个属性为只读属性，赋值不会生效；
• width 和 height 属性为视频在页面上显示的尺寸，可以在元素设置或JS赋值；
• width 和 height 属性优先级低于样式，同时使用样式和属性设置宽高，最后生效的是样式；

参考资料
http://www.w3school.com.cn/tags/av_event_canplay.asp

转载于:https://my.oschina.net/py115/blog/1789294