如何可靠且一致地获得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元素的计算宽度样式？

回答

相关问题