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

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

在事件加载元数据之后或者如果readyState 属性高于或等于 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'
    })
;

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

Answer 2

如果要获取视频元素的固有宽度和高度，则应获取videoWidth和videoHeight. 请参阅本文档