控制台显示不同的视频客户端宽度

Question

看看这样：

https://jsfiddle.net/udr2m3xn/1/

这是HTML

<video> 
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
</video> 

这是JS

var video = document.querySelector('video'); 
var vw = video.clientWidth; 

console.log('Client width: ' + vw); 
console.dir(video); 

视频是320x176 PX。但是，vw变量输出300（它应该是320）。但是，当你检查视频属性，你可以看到，它说，该客户端宽度为320

这是一个调试或者我失去了一些东西？提前致谢！

Answer 1

你应该等待视频的元数据，以试图访问变量，使用loadedmetadata事件之前加载是确定性（意思是给定相同/不同的输入输出没有按” t表现出不同的行为），而setTimeout是非确定性的。

video.addEventListener("loadedmetadata", function() { 
    console.log(video.clientWidth) 
}, true) 

我建议检查出的events的完整列表，因为可能有其他人，你会发现有用！

Answer 2

300是<video>元素的默认宽度。 JS在视频有时间加载之前执行，并设置元素的合适宽度。如果你将你的JS包装在setTimeout()中，你会看到正确的宽度。亲身体验：

https://jsfiddle.net/udr2m3xn/3/