js获取video的真实宽高

参考：https://blog.csdn.net/ganggelove/article/details/112526292

最近要实现一个功能，使用的vue项目，需要获取到video元素的真实宽度，但是通过$refs获取到的宽高并不是真实的宽度，之后再网上查到，可以通过js进行实现

实现原理

原生video上有一个canplay方法，可以监听视频是否可以开始播放，而当canplay的时候，说明视频已经加载成功，这个时候可以获取到视频的真实宽高了

<video id='video'></video>

const video = document.getElementById('video')
video.addEventListener('canplay', e => {
	console.log(e.target.clientWidth) // 获取视频的真实宽度
})