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

发布于 2024-11-26 11:05:34 字数 401 浏览 2 评论 0原文

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

原文

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"));

The console invariably shows "300px," but obviously the value I'm looking for is "640px". If I use setTimeout on that console.log call with a delay of 100 milliseconds, the correct "640px" value shows up in the console.

I'd rather not use setTimeout, though. Is there a "proper" way to get the accurate calculated style value?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

荒人说梦 2024-12-03 11:05:35

如果您想获取视频元素的固有宽度和高度，您应该获取 videoWidth 和 videoHeight。请参阅此文档

回复收藏 0 原文

魔法唧唧 2024-12-03 11:05:34

活动结束后您可以获取正确的videoHeight/videoWidth loadedmetadata 或者如果 readyState 属性大于或等于 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'
    })
;

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

You can get the correct videoHeight/videoWidth after the event loadedmetadata or if the readyState property is higher or equal 1.

The code to get the right value - using jQuery - could look like this:

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

But note, that, not all browser do start fetching the video immediately.

回复收藏 0 原文

~没有更多了~