Próbuję uzyskać wymiary filmu, którego nakładam na stronę za pomocą JavaScript, jednak zwraca on wymiary obrazu plakatu zamiast rzeczywistego wideo, ponieważ wydaje się, że jest obliczany przed załadowaniem wideo.

<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

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

Należy zauważyć, że obecnie akceptowane powyżej rozwiązanie autorstwa Sime Vidas w rzeczywistości nie działa w nowoczesnych przeglądarkach, ponieważ właściwości videoWidth i videoHeight są ustawiane dopiero po uruchomieniu zdarzenia „loadmetadata”.

Jeśli zdarzy się, że zapytasz o te właściwości wystarczająco długo po wyrenderowaniu elementu VIDEO, może to czasami zadziałać, ale w większości przypadków zwróci wartości 0 dla obu właściwości.

Aby zagwarantować, że otrzymujesz prawidłowe wartości właściwości, musisz zrobić coś w następujący sposób:

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

UWAGA: Nie zawracałem sobie głowy uwzględnianiem wersji Internet Explorera sprzed 9, które używają attachEvent zamiast addEventListener, ponieważ wersje tej przeglądarki starsze niż 9 i tak nie obsługują wideo HTML5.

Funkcja gotowa do użycia

Oto gotowa do użycia funkcja, która zwraca wymiary wideo asynchronicznie, bez zmiany czegokolwiek w dokumencie .

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

Oto film użyty we fragmencie, jeśli chcesz go zobaczyć: Big Buck Bunny

Nasłuchuj loadedmetadatazdarzenia, które jest wywoływane, gdy agent użytkownika właśnie określił czas trwania i wymiary zasobu multimedialnego

Sekcja 4.7.10.16 Podsumowanie zdarzeń

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

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

Oto, jak można to zrobić w 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>

W Vuejs używam następującego kodu w zamontowanym tagu.

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