HTML5 视频尺寸

Question

我正在尝试获取我正在使用 JavaScript 覆盖到页面上的视频的尺寸，但是它返回海报图像的尺寸而不是实际视频，因为它似乎是在加载视频之前计算的。

原文由 Elliot 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<video id="foo" src="foo.mp4"></video>

var vid = document.getElementById("foo");
vid.videoHeight; // returns the intrinsic height of the video
vid.videoWidth; // returns the intrinsic width of the video

规范： https ://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element

原文由 Šime Vidas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

应该注意的是，Sime Vidas 目前接受的上述解决方案实际上在现代浏览器中不起作用，因为 videoWidth 和 videoHeight 属性直到“loadedmetadata”事件触发后才设置。

如果您碰巧在呈现 VIDEO 元素后查询这些属性足够远，它有时可能会起作用，但在大多数情况下，这将返回两个属性的值 0。

为了保证您获得正确的属性值，您需要按照以下方式做一些事情：

 var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) {
    var width = this.videoWidth,
        height = this.videoHeight;
}, false );

注意：我没有考虑使用 attachEvent 而不是 addEventListener 的 9 之前版本的 Internet Explorer，因为该浏览器的 9 之前版本无论如何都不支持 HTML5 视频。

原文由 natlee75 发布，翻译遵循 CC BY-SA 4.0 许可协议