এইচটিএমএল 5 ভিডিও মাত্রা

Question 1

আমি জাভাস্ক্রিপ্ট সহ একটি পৃষ্ঠায় ওভারলাইজ করছি এমন একটি ভিডিওর মাত্রা পাওয়ার চেষ্টা করছি, তবে এটি প্রকৃত ভিডিওর পরিবর্তে পোস্টার চিত্রের মাত্রাগুলি ফিরিয়ে দিচ্ছে কারণ মনে হচ্ছে ভিডিওটি লোড হওয়ার আগে এটি গণনা করা হচ্ছে।

Question 2

<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/m Multipage/e এমবেডড- কনটেন্ট। Html#the-video- element

Question 3

এটি লক্ষ করা উচিত যে সিম ভিদাসের দ্বারা বর্তমানে গৃহীত সমাধানগুলি আধুনিক ব্রাউজারগুলিতে আসলে কাজ করে না, যেহেতু "লোডমেডেডাটা" ইভেন্টটি চালিত হওয়ার আগে পর্যন্ত ভিডিওউইথ এবং ভিডিও হাইটের বৈশিষ্ট্যগুলি সেট করা হয় না।

আপনি যদি ভিআইডিইও উপাদানটি রেন্ডার হওয়ার পরেও যথেষ্ট পরিমাণে এই সম্পত্তিগুলির জন্য জিজ্ঞাসা করে থাকেন তবে এটি কখনও কখনও কাজ করতে পারে তবে বেশিরভাগ ক্ষেত্রে এটি উভয় বৈশিষ্ট্যের জন্য 0 এর মান প্রদান করবে।

আপনি সঠিক সম্পত্তির মান পাচ্ছেন তা নিশ্চিত করার জন্য আপনাকে এর লাইন ধরে কিছু করতে হবে:

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

দ্রষ্টব্য: আমি ইন্টারনেট এক্সপ্লোরার এর প্রাক -9 সংস্করণগুলির জন্য অ্যাকাউন্টিংকে বিরক্ত করি নি যা এড ব্রাউজারের 9-পূর্ব সংস্করণটি যেভাবেই এইচটিএমএল 5 ভিডিও সমর্থন করে না কারণ অ্যাডএভেন্টলিস্টনার পরিবর্তে সংযুক্তিভেন্ট ব্যবহার করে।

Question 4

ফাংশন ব্যবহার করতে প্রস্তুত

এখানে ফাংশনটি ব্যবহারের জন্য প্রস্তুত যা ডকুমেন্টের কোনও পরিবর্তন না করেই অ্যাসিঙ্ক্রোসালি কোনও ভিডিওর মাত্রা প্রদান করে ।

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

স্নিপেট প্রসারিত করুন

আপনি যদি এটি দেখতে চান তবে স্নিপেটের জন্য ব্যবহৃত ভিডিওটি এখানে রয়েছে: বিগ বুক বানি

Question 5

loadedmetadataব্যবহারকারী এজেন্ট যখন মিডিয়া সংস্থানটির সময়কাল এবং মাত্রা সবেমাত্র নির্ধারণ করেছে তখন প্রেরণ করা ইভেন্টটির জন্য শোনো Listen

বিভাগ 4.7.10.16 ইভেন্টের সংক্ষিপ্তসার

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

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

Question 6

ভ্যুতে এটি এটি করা যায়:

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

Question 7

ভয়েজগুলিতে আমি মাউন্ট করা ট্যাগে নিম্নলিখিত কোডগুলি ব্যবহার করি।

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