HTML5 أبعاد الفيديو

Question

أحاول الحصول على أبعاد مقطع فيديو أتراكبه على صفحة مع JavaScript ، ومع ذلك فهو يعيد أبعاد صورة الملصق بدلاً من الفيديو الفعلي كما يبدو أنه يتم حسابه قبل تحميل الفيديو.

Answer 1

<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

المواصفات: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element

Answer 2

تجدر الإشارة إلى أن الحل المقبول حاليًا أعلاه من قبل Sime Vidas لا يعمل فعليًا في المتصفحات الحديثة حيث لم يتم تعيين خصائص VideoWidth و VideoHeight إلا بعد إطلاق حدث "LoadedMetadata".

إذا صادفت الاستعلام عن تلك الخصائص بعيدًا بما يكفي بعد تقديم عنصر الفيديو ، فقد يعمل في بعض الأحيان ، ولكن في معظم الحالات ، سيعيد هذا قيم 0 لكلا الخصائص.

لضمان حصولك على قيم الخاصية الصحيحة ، تحتاج إلى القيام بشيء على غرار:

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

ملاحظة: لم أكن عناء حساب إصدارات ما قبل 9 من Internet Explorer والتي تستخدم AdploRENT بدلاً من AddEventListener لأن إصدارات ما قبل 9 من هذا المتصفح لا تدعم فيديو HTML5 ، على أي حال.

Answer 3

جاهز لاستخدام الوظيفة

إليك وظيفة جاهزة لاستخدامها تُرجع أبعاد الفيديو بشكل غير متزامن ، دون تغيير أي شيء في المستند.

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

إليك مقطع الفيديو المستخدم في المقتطف إذا كنت ترغب في رؤيته: باك الأرنب الكبير

Answer 4

استمع ل loadedmetadata الحدث الذي يتم إرساله عندما يحدد وكيل المستخدم مدة وأبعاد مورد الوسائط

القسم 4.7.10.16 ملخص الحدث

https://www.w3

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

Answer 5

في Vuejs أنا أستخدم الكود التالي في علامة مثبتة.

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