Question

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。是否有“正确”的方法来获得准确的计算样式值？

Answer 1

您可以在活动videoHeight/videoWidth之后或loadedmetadata获得正确的readyState property is higher or equal 1。

使用jQuery获取正确值的代码可能如下所示：

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

但请注意，并非所有浏览器都会立即开始提取视频。

Answer 2

如果您想获得视频元素的固有宽度和高度，您应该获得videoWidth和videoHeight。见documentation

如何可靠且一致地获得VIDEO元素的计算宽度样式？

2 个答案: