控制檯顯示不同的視頻客戶端寬度

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/