如何可靠且一致地獲得VIDEO元素的計算寬度樣式？

var vid = document.createElement("video"); 
vid.src = "big_buck_bunny_640x360.mp4"; 
document.getElementsByTagName("body")[0].appendChild(vid); 
console.log(window.getComputedStyle(vid, null).getPropertyValue("width"));

控制檯總是顯示「300px」，但顯然我要找的值是「640px」。如果我在該console.log調用上使用setTimeout延遲100毫秒，則正確的「640px」值將顯示在控制檯中。不過，我寧可不使用setTimeout。有沒有一種「正確」的方式來獲得準確的計算樣式值？如何可靠且一致地獲得VIDEO元素的計算寬度樣式？

來源

2011-07-26 natlee75

您可以將事件loadedmetadata後，或者如果readyState property is higher or equal 1得到正確videoHeight/videoWidth。

的代碼，以獲得正確的價值 - 使用jQuery - 看起來是這樣的：

$('<video />') 
    .appendTo('body') 
    .one('loadedmetadata', function(){ 
     console.log($.prop(this, 'videoHeight'), $.prop(this, 'videoWidth')); 
    }) 
    .prop({ 
     'src': 'big_buck_bunny_640x360.mp4', 
     'preload': 'metadata' 
    }) 
;

但請注意，是，不是所有的瀏覽器就立即開始獲取視頻。

來源

2011-07-26 11:03:16

如果你想獲得視頻元素的固有寬度和高度，你應該得到videoWidth和videoHeight。看到這個documentation

來源

2011-07-26 03:41:04

如何可靠且一致地獲得VIDEO元素的計算寬度樣式？

回答

相關問題