Tôi đang cố lấy kích thước của một video mà tôi đang phủ lên một trang bằng JavaScript, tuy nhiên, nó đang trả về kích thước của hình ảnh áp phích thay vì video thực vì có vẻ như nó đang được tính toán trước khi tải 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

Thông số: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element

Cần lưu ý rằng giải pháp hiện được chấp nhận ở trên của Sime Vidas không thực sự hoạt động trong các trình duyệt hiện đại vì thuộc tính videoWidth và videoHeight không được đặt cho đến sau khi sự kiện "loadmetadata" được kích hoạt.

Nếu bạn tình cờ truy vấn các thuộc tính đó đủ xa sau khi phần tử VIDEO được hiển thị, đôi khi nó có thể hoạt động, nhưng trong hầu hết các trường hợp, điều này sẽ trả về giá trị 0 cho cả hai thuộc tính.

Để đảm bảo rằng bạn đang nhận được các giá trị thuộc tính chính xác, bạn cần làm điều gì đó dọc theo các dòng:

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

LƯU Ý: Tôi không bận tâm đến việc tính toán các phiên bản Internet Explorer trước 9 sử dụng AttachEvent thay vì addEventListener vì các phiên bản trước 9 của trình duyệt đó không hỗ trợ video HTML5.

Chức năng sẵn sàng sử dụng

Đây là một hàm sẵn sàng để sử dụng, trả về kích thước của video một cách không đồng bộ, mà không thay đổi bất kỳ điều gì trong tài liệu .

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

Đây là video được sử dụng cho đoạn mã nếu bạn muốn xem: Big Buck Bunny

Lắng nghe loadedmetadatasự kiện được gửi đi khi tác nhân người dùng vừa xác định thời lượng và kích thước của tài nguyên phương tiện

Phần 4.7.10.16 Tóm tắt sự kiện

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

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

Đây là cách nó có thể được thực hiện trong 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>

Trong Vuejs, tôi sử dụng mã sau trong thẻ gắn kết.

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