HTML5 视频尺寸

javascript jquery html5-video

2022-08-30 04:48:45

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

答案 1

应该注意的是，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 );

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

答案 2

<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