如何获取HTML5视频元素的宽度？

Question

在下面，我尝试记录视频的宽度，但它为0。如何正确获取宽度和高度？

 function doSomething() { const el = document.querySelector('video'); console.log('el.offsetLeft', el.offsetLeft); console.log('el.offsetTop', el.offsetTop); console.log('el.width', el.width); console.log('el.height', el.height); } 

 .flex-center { display: flex; justify-content: center; align-items: center; align-self: center; } .container { padding: 50px; } 

 <div class="container"> <video class="flex-center" controls preload onloadedmetadata="doSomething()"> <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> </video> </div> 

Answer 1

这对我有用！ （请注意，我使用的是offsetWidth和offsetHeight而不是width和height ）。

 function doSomething() { const el = document.querySelector('video'); console.log('el.offsetLeft', el.offsetLeft); console.log('el.offsetTop', el.offsetTop); console.log('el.style.width', el.offsetWidth); console.log('el.height', el.offsetHeight); } 

 .flex-center { display: flex; justify-content: center; align-items: center; align-self: center; } .container { padding: 50px; } 

 <div class="container"> <video class="flex-center" controls preload onloadedmetadata="doSomething()"> <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> </video> </div>