Ich versuche, die Abmessungen eines Videos abzurufen, von dem ich eine Seite mit JavaScript überlagere. Es werden jedoch die Abmessungen des Posterbilds anstelle des tatsächlichen Videos zurückgegeben, da es anscheinend vor dem Laden des Videos berechnet wird.

<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

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

Es ist zu beachten, dass die derzeit von Sime Vidas oben akzeptierte Lösung in modernen Browsern nicht funktioniert, da die Eigenschaften videoWidth und videoHeight erst nach dem Auslösen des Ereignisses "loadmetadata" festgelegt werden.

Wenn Sie diese Eigenschaften nach dem Rendern des VIDEO-Elements weit genug abfragen, funktioniert dies manchmal. In den meisten Fällen werden jedoch für beide Eigenschaften Werte von 0 zurückgegeben.

Um sicherzustellen, dass Sie die richtigen Eigenschaftswerte erhalten, müssen Sie Folgendes tun:

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

HINWEIS: Ich habe mich nicht darum gekümmert, Vor-9-Versionen von Internet Explorer zu berücksichtigen, die attachEvent anstelle von addEventListener verwenden, da Vor-9-Versionen dieses Browsers HTML5-Videos sowieso nicht unterstützen.

Gebrauchsfertige Funktion

Hier ist eine gebrauchsfertige Funktion, die die Abmessungen eines Videos asynchron zurückgibt, ohne etwas im Dokument zu ändern .

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

Hier ist das Video, das für das Snippet verwendet wird, wenn Sie es sehen möchten: Big Buck Bunny

Warten Sie auf das loadedmetadataEreignis, das ausgelöst wird, wenn der Benutzeragent gerade die Dauer und die Abmessungen der Medienressource festgelegt hat

Abschnitt 4.7.10.16 Ereigniszusammenfassung

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

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

So geht das 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 verwende ich folgenden Code im gemounteten Tag.

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