Sto cercando di ottenere le dimensioni di un video di cui sto sovrapponendo una pagina con JavaScript, tuttavia restituisce le dimensioni dell'immagine del poster invece del video effettivo poiché sembra che venga calcolato prima del caricamento del video.

<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

Specifiche: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element

Va notato che la soluzione attualmente accettata sopra da Sime Vidas in realtà non funziona nei browser moderni poiché le proprietà videoWidth e videoHeight non vengono impostate fino a quando non è stato attivato l'evento "loadmetadata".

Se ti capita di eseguire una query per quelle proprietà abbastanza lontano dopo che l'elemento VIDEO è stato reso, a volte potrebbe funzionare, ma nella maggior parte dei casi restituirà valori di 0 per entrambe le proprietà.

Per garantire che stai ottenendo i valori di proprietà corretti, devi fare qualcosa sulla falsariga di:

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

NOTA: non mi sono preoccupato di tenere conto delle versioni precedenti alla 9 di Internet Explorer che utilizzano attachEvent invece di addEventListener poiché le versioni precedenti alla 9 di quel browser non supportano il video HTML5, comunque.

Funzione pronta all'uso

Ecco una funzione pronta per l'uso che restituisce le dimensioni di un video in modo asincrono, senza modificare nulla nel 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) ;
    });

Ecco il video utilizzato per lo snippet se desideri vederlo: Big Buck Bunny

Ascolta l' loadedmetadataevento che viene inviato quando il programma utente ha appena determinato la durata e le dimensioni della risorsa multimediale

Sezione 4.7.10.16 Riepilogo 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);
});

Ecco come può essere fatto in 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>

In Vuejs utilizzo il seguente codice nel tag montato.

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