我正在尝试获取我用JavaScript叠加到页面上的视频的尺寸,但它返回的是海报图像的尺寸,而不是实际视频的尺寸,因为它似乎是在视频加载之前计算出来的。
发布于 2010-11-09 07:47:21
<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
发布于 2012-02-18 02:12:13
应该注意的是,Sime Vidas目前接受的上述解决方案实际上在现代浏览器中不起作用,因为videoWidth和videoHeight属性只有在"loadedmetadata“事件触发之后才会设置。
如果您碰巧在渲染视频元素后足够远地查询这些属性,那么它有时可能会起作用,但在大多数情况下,这两个属性的返回值都为0。
为了保证您获得正确的属性值,您需要执行以下操作:
var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) {
var width = this.videoWidth,
height = this.videoHeight;
}, false );
注:我没有考虑使用attachEvent而不是addEventListener的Internet Explorer 9之前版本,因为9之前版本的浏览器无论如何都不支持HTML5视频。
发布于 2010-11-09 09:03:35
监听当用户代理刚刚确定媒体资源的持续时间和维度时调度的loadedmetadata
事件
第4.7.10.16节事件摘要
https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata
videoTagRef.addEventListener('loadedmetadata', function(e){
console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});
https://stackoverflow.com/questions/4129102
复制相似问题