JavaScript içeren bir sayfaya üzerine bindirdiğim bir videonun boyutlarını almaya çalışıyorum, ancak video yüklenmeden önce hesaplandığı için gerçek video yerine poster görüntüsünün boyutlarını döndürüyor.

<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

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

VideoWidth ve videoHeight özellikleri "loadmetadata" olayı tetiklenene kadar ayarlanmadığından, yukarıda Sime Vidas tarafından şu anda kabul edilen çözümün aslında modern tarayıcılarda çalışmadığı unutulmamalıdır.

VIDEO öğesi oluşturulduktan sonra bu özellikler için yeterince sorgulama yaparsanız, bazen işe yarayabilir, ancak çoğu durumda bu, her iki özellik için de 0 değerlerini döndürür.

Doğru emlak değerlerini aldığınızı garanti etmek için şu satırlar boyunca bir şeyler yapmanız gerekir:

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

NOT: Bu tarayıcının 9 öncesi sürümleri HTML5 videoyu desteklemediğinden, addEventListener yerine attachEvent kullanan Internet Explorer'ın 9 öncesi sürümlerinin muhasebesini yapmakla uğraşmadım.

Kullanıma hazır fonksiyon

Belgedeki hiçbir şeyi değiştirmeden videonun boyutlarını eşzamansız olarak döndüren kullanıma hazır bir işlev .

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

Görmek isterseniz, pasaj için kullanılan video: Big Buck Bunny

loadedmetadataKullanıcı aracısı medya kaynağının süresini ve boyutlarını henüz belirlediğinde gönderilen olayı dinleyin

Bölüm 4.7.10.16 Olay özeti

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

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

Vue'da şu şekilde yapılabilir:

<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>

Vuejs'de aşağıdaki kodu takılı etikette kullanıyorum.

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