Estou tentando obter as dimensões de um vídeo que estou sobrepondo em uma página com JavaScript, no entanto, ele está retornando as dimensões da imagem do pôster em vez do vídeo real, pois parece que está sendo calculado antes de o vídeo ser carregado.

<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

Especificação: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element

Deve-se notar que a solução atualmente aceita acima pela Sime Vidas não funciona realmente em navegadores modernos, uma vez que as propriedades videoWidth e videoHeight não são definidas até que o evento "carregadometadata" seja disparado.

Se acontecer de você consultar essas propriedades o suficiente após o elemento VIDEO ser renderizado, às vezes pode funcionar, mas na maioria dos casos, isso retornará valores 0 para ambas as propriedades.

Para garantir que você está obtendo os valores de propriedade corretos, você precisa fazer algo como:

var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) {
    var width = this.videoWidth,
        height = this.videoHeight;
}, false );

NOTA: Não me preocupei em contabilizar as versões anteriores a 9 do Internet Explorer que usam attachEvent em vez de addEventListener, uma vez que as versões anteriores a 9 desse navegador não suportam vídeo HTML5, de qualquer maneira.

Função pronta para usar

Aqui está uma função pronta para usar que retorna as dimensões de um vídeo de forma assíncrona, sem alterar nada no documento .

// ---- 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) ;
    });

Aqui está o vídeo usado para o trecho, se você quiser vê-lo: Big Buck Bunny

Ouça o loadedmetadataevento que é despachado quando o agente do usuário acaba de determinar a duração e as dimensões do recurso de mídia

Seção 4.7.10.16 Resumo do evento

https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata

videoTagRef.addEventListener('loadedmetadata', function(e){
    console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});

É assim que pode ser feito no 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>

Em Vuejs eu uso o seguinte código na tag montada.

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
    },
});