javascript - [jQuery]如何从 'loadedmetadata'获取视频的宽度？

Question

我正在尝试获取视频的宽度和高度。在 HTML 中我有:

<video id="bg-video" autoplay muted loop src="BG-video/video.mp4"></video>

CSS 是:

#bg-video{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}

如您所见，我没有在 CSS 或 HTML 中指定宽度或高度。

我使用 jQuery 来获取视频的宽度和高度。如果视频的分辨率是 1364x768，我希望获得这些值。

我使用loadedmetadata来确保在加载视频元数据后获得宽度/高度。这是代码:

$(document).ready(function(){
    var videoCache = $('#bg-video'); // this is a video with id="bg-video"
    var foo;
    videoCache.on('loadedmetadata',function(){
        foo = videoCache.width();
        alert('First alert! Width is ' + foo);
    });
    alert('Second alert! Width is ' + foo);
});

问题是第二个警报出现在第一个警报之前，并且 foo 值为 undefined，因此我无法在处理程序之外使用宽度值。当第二个警报出现时，有没有办法获取 foo 的正确值？

Answer 1

出现第二个警报是因为第一个警报正在等待事件 loadedmetadata，直到该事件发生为止，foo 没有定义的值。

您希望在设置该值后发生的任何事情都应该从 loadedmetadata 事件监听器中调用来运行。