HTML5视频尺寸
HTML5视频尺寸
提问于 2010-11-09 07:25:34
我正在尝试获取我用JavaScript叠加到页面上的视频的尺寸，但它返回的是海报图像的尺寸，而不是实际视频的尺寸，因为它似乎是在视频加载之前计算出来的。
回答 5
Stack Overflow用户
回答已采纳
发布于 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
Stack Overflow用户
发布于 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视频。
Stack Overflow用户
发布于 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);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4129102
复制相关文章
相似问题