Saya mencoba untuk mendapatkan dimensi video yang saya overlay ke halaman dengan JavaScript, namun itu mengembalikan dimensi gambar poster daripada video sebenarnya karena tampaknya dihitung sebelum video dimuat.

<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

Perlu diperhatikan bahwa solusi yang saat ini diterima di atas oleh Sime Vidas tidak benar-benar berfungsi di browser modern karena properti videoWidth dan videoHeight tidak disetel hingga peristiwa "dimuatmetadata" diaktifkan.

Jika Anda kebetulan membuat kueri untuk properti tersebut cukup jauh setelah elemen VIDEO dirender, ini terkadang berfungsi, tetapi dalam banyak kasus ini akan mengembalikan nilai 0 untuk kedua properti.

Untuk menjamin bahwa Anda mendapatkan nilai properti yang benar, Anda perlu melakukan sesuatu di sepanjang baris:

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

CATATAN: Saya tidak repot menghitung versi Internet Explorer pra-9 yang menggunakan attachEvent alih-alih addEventListener karena versi pra-9 dari browser tersebut tidak mendukung video HTML5.

Fungsi siap pakai

Berikut adalah fungsi siap pakai yang mengembalikan dimensi video secara asinkron, tanpa mengubah apa pun di dokumen .

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

Berikut video yang digunakan untuk cuplikan tersebut jika Anda ingin melihatnya: Big Buck Bunny

Dengarkan loadedmetadataperistiwa yang dikirim ketika agen pengguna baru saja menentukan durasi dan dimensi sumber daya media

Bagian 4.7.10.16 Ringkasan acara

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

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

Beginilah cara melakukannya di 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>

Di Vuejs saya menggunakan kode berikut di tag yang dipasang.

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