Javascript HTML5 视频尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4129102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video Dimensions
提问by Elliot
I'm trying to get the dimensions of a video of which I'm overlaying onto a page with JavaScript, however it is returning the dimensions of the poster image instead of the actual video as it seems it's being calculated before the video is loaded.
我正在尝试获取我正在使用 JavaScript 覆盖到页面上的视频的尺寸，但是它返回的是海报图像的尺寸而不是实际视频，因为它似乎是在加载视频之前计算出来的。
采纳答案by ?ime Vidas
<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
Spec: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element
规范：https: //html.spec.whatwg.org/multipage/embedded-content.html#the-video-element
回答by natlee75
It should be noted that the currently accepted solution above by Sime Vidas doesn't actually work in modern browsers since the videoWidth and videoHeight properties aren't set until after the "loadedmetadata" event has fired.
应该注意的是，Sime Vidas 目前接受的解决方案实际上不适用于现代浏览器，因为 videoWidth 和 videoHeight 属性直到“loadedmetadata”事件触发后才设置。
If you happen to query for those properties far enough after the VIDEO element is rendered it may sometimes work, but in most cases this will return values of 0 for both properties.
如果您碰巧在 VIDEO 元素呈现后查询这些属性足够远，它有时可能会起作用，但在大多数情况下，这将返回两个属性的值 0。
To guarantee that you're getting the correct property values you need to do something along the lines of:
为了保证您获得正确的属性值，您需要执行以下操作：
var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) {
var width = this.videoWidth,
height = this.videoHeight;
}, false );
NOTE: I didn't bother accounting for pre-9 versions of Internet Explorer which use attachEvent instead of addEventListener since pre-9 versions of that browser don't support HTML5 video, anyway.
注意：我没有考虑使用 attachEvent 而不是 addEventListener 的 9 之前版本的 Internet Explorer，因为该浏览器的 9 之前版本不支持 HTML5 视频。
回答by Yairopro
Ready to use function
准备使用功能
Here's a ready to use function which returns the dimensions of a video asynchrously, without changing anything in the document.
这是一个随时可用的函数，它异步返回视频的尺寸，而不更改文档中的任何内容。
// ---- Definitions ----- //
/**
Returns the dimensions of a video asynchrounsly.
@param {String} url Url of the video to get dimensions from.
@return {Promise} Promise which returns the dimensions of the video in 'width' and 'height' properties.
*/
function getVideoDimensionsOf(url){
return new Promise(function(resolve){
// create the video element
let video = document.createElement('video');
// place a listener on it
video.addEventListener( "loadedmetadata", function () {
// retrieve dimensions
let height = this.videoHeight;
let width = this.videoWidth;
// send back result
resolve({
height : height,
width : width
});
}, false );
// start download meta-datas
video.src = url;
});
}
// ---- Use ---- //
getVideoDimensionsOf("http://clips.vorwaerts-gmbh.de/VfE_html5.mp4")
.then(({width, height}) => {
console.log("Video width: " + width) ;
console.log("Video height: " + height) ;
});Here's the video used for the snippet if you wish to see it : Big Buck Bunny
如果您想看，这里是用于片段的视频：Big Buck Bunny
回答by Juan Mendes
Listen for the loadedmetadataevent which is dispatched when the user agent has just determined the duration and dimensions of the media resource
监听loadedmetadata当用户代理刚刚确定媒体资源的持续时间和维度时调度的事件
Section 4.7.10.16 Event summary
第 4.7.10.16 节事件摘要
https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata
https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata
videoTagRef.addEventListener('loadedmetadata', function(e){
console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});
回答by Ilyich
This is how it can be done in Vue:
这就是它在 Vue 中的实现方式：
<template>
<div>
<video src="video.mp4" @loadedmetadata="getVideoDimensions"></video>
</div>
</template>
<script>
export default {
methods: {
getVideoDimensions (e) {
console.log(e.target.videoHeight)
console.log(e.target.videoWidth)
}
}
}
</script>
回答by Aseem
In Vuejs I use following code in mounted tag.
在 Vuejs 中，我在挂载标签中使用以下代码。
var app = new Vue({
el: '#id_homepage',
mounted: function () {
var v = document.getElementById("id_video");
var width = v.offsetWidth;
v.height = Math.floor(width*(9/16)); // dynamically setting video height to maintain aspect ratio
},
});
