我正在尝试将我正在覆盖的视频的尺寸放到带有JavaScript的页面上,但它会返回海报图像的尺寸而不是实际的视频,因为它似乎是在视频之前计算的装了。
答案 0 :(得分:115)
应该注意的是,Sime Vidas上面当前接受的解决方案实际上并不适用于现代浏览器,因为直到“loadedmetadata”事件被触发后才会设置videoWidth和videoHeight属性。
如果您在呈现VIDEO元素后碰巧查询了这些属性,它有时可能会起作用,但在大多数情况下,这将为两个属性返回值0.
为了保证您获得正确的属性值,您需要执行以下操作:
var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) {
var width = this.videoWidth,
height = this.videoHeight;
}, false );
注意:我没有考虑使用attachEvent而不是addEventListener的Internet Explorer的9版之前的版本,因为该版本的浏览器不支持HTML5视频。
答案 1 :(得分:75)
<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
答案 2 :(得分:12)
监听用户代理刚刚确定媒体资源的持续时间和维度时调度的loadedmetadata
事件
https://www.w3.org/TR/html5/embedded-content-0.html#event-media-loadedmetadata
videoTagRef.addEventListener('loadedmetadata', function(e){
console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});
答案 3 :(得分:11)
这是一个随时可用的功能,它可以异常地返回视频的尺寸,而不会更改文档中的任何内容。
// ---- 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;
});
}
// ---- Usation ---- //
getVideoDimensionsOf("http://clips.vorwaerts-gmbh.de/VfE_html5.mp4")
.then(function(dimensions){
console.log("Video width: " + dimensions.width) ;
console.log("Video height: " + dimensions.height) ;
});
如果您希望看到以下内容,则会显示用于该代码段的视频:Big Buck Bunny
答案 4 :(得分:1)
这是在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>
答案 5 :(得分:-1)
在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
},
});