এম্বেড ভিডিও HTML:একটি ধাপে ধাপে নির্দেশিকা

আপনি এই ফাংশনগুলি ব্যবহার করে একটি HTML নথিতে একটি ভিডিও এম্বেড করতে পারেন:৷ <video> , <object> , এবং <embed> প্রতিটি আলাদাভাবে কাজ করে, এবং প্রত্যেকে ব্যবহার করে src কাঙ্খিত ভিডিওর URL নির্দেশ করার জন্য বৈশিষ্ট্য।

আপনি যখন একটি ওয়েব পৃষ্ঠা তৈরি করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে আপনি নথিতে একটি ভিডিও এম্বেড করতে চান। উদাহরণস্বরূপ, আপনি হয়ত একটি কেক বেক করতে এবং রেসিপির সাথে একটি ভিডিও অন্তর্ভুক্ত করতে একটি টিউটোরিয়াল লিখছেন৷

একটি HTML নথিতে ভিডিও এম্বেড করার কয়েকটি উপায় রয়েছে। এই নির্দেশিকায়, আমরা তিনটি উপায় কভার করব যা আপনি এই HTML ব্যবহার করে একটি ভিডিও এম্বেড করতে পারেন ফাংশন:<video> ব্যবহার করে , <object> ব্যবহার করে , এবং <embed> ব্যবহার করে .

ভিডিও ট্যাগ

HTML5 ওয়েব পৃষ্ঠাগুলিতে ভিডিও এম্বেড করার জন্য একটি দরকারী উপাদান রয়েছে:<video> . যদিও উপাদানটি সমস্ত আধুনিক ওয়েব ব্রাউজারে কাজ করে না—এটি এখনও কিছুটা নতুন — ট্যাগটি বেশিরভাগ ব্রাউজারে কাজ করবে৷

ভিডিও উপাদান দুটি পরামিতি নেয়:আপনার ভিডিওর উত্স এবং আপনি যে নিয়ন্ত্রণগুলি ব্যবহার করতে চান৷ এখানে এমবেড ভিডিও HTML এর সিনট্যাক্স রয়েছে <video> ট্যাগ:

<video controls="controls" src="videos/ourVideo.mp4">
	This browser does not support the video element.
</video>

উপরের উদাহরণে, আমরা src ব্যবহার করি videos/ourVideo.mp4-এ ভিডিওটির উল্লেখ করার জন্য বৈশিষ্ট্য . আমরা ব্রাউজারকে controls ব্যবহার করে এর সাথে আসা নিয়ন্ত্রণের ডিফল্ট সেট ব্যবহার করতে বলি। বৈশিষ্ট্য আমাদের <video>-এর মধ্যে পাঠ্য ভিডিওটি ওয়েব পেজে রেন্ডার করতে না পারলে ট্যাগ দেখা যাবে।

যদি আমরা বিকল্প উত্স অন্তর্ভুক্ত করতে চাই, আমরা নিম্নলিখিত কোড ব্যবহার করতে পারি:

<video controls="controls">
	<source src="videos/ourVideo.mp4" type="video/mp4">
	<source src="videos/ourSecondVideo.mp3" type="video/mp3">
	This browser does not support the video element.
</video>

এখন আমরা আমাদের সোর্স এলিমেন্ট ব্যবহার করে আমাদের ওয়েবপেজে একটি ভিডিও সন্নিবেশ করেছি। উপরে, আমরা একটি mp4 এবং একটি mp3 রিসোর্স উল্লেখ করেছি, কিন্তু আপনি <video>-এ যেকোনো স্ট্যান্ডার্ড ভিডিও ফরম্যাট ব্যবহার করতে পারেন ট্যাগ।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

এম্বেড ট্যাগ

উপরন্তু, আপনি <embed> ব্যবহার করতে পারেন একটি HTML এ ভিডিও এবং অন্যান্য মাল্টিমিডিয়া এম্বেড করার উপাদান ওয়েব পেজ এখানে একটি <embed> এর উদাহরণ দেওয়া হল একটি ওয়েব পৃষ্ঠায় একটি Adobe Flash ভিডিও রেফারেন্স করার জন্য ট্যাগ ব্যবহার করা হচ্ছে:

<embed src="videos/ourVideo.swf" width="600px" height="400px">

এই কোডটি ওয়েবপেজে একটি ফ্ল্যাশ ভিডিও রেন্ডার করে। আমরা widthও ব্যবহার করেছি এবং height আমাদের ভিডিও প্লেয়ারের আকার নির্দিষ্ট করার পরামিতি। এই ক্ষেত্রে, আমাদের ভিডিও প্লেয়ার 600×400 আকারে রেন্ডার করবে।

যাইহোক, আপনি যদি ফ্ল্যাশ রিসোর্স উল্লেখ করেন, তাহলে আপনার ভিডিও প্লে নাও হতে পারে। কারণ ব্যবহারকারীদের অবশ্যই তাদের সিস্টেমে ফ্ল্যাশ ইনস্টল এবং সক্রিয় থাকতে হবে এবং অনেক ব্যবহারকারী তা করেন না।

অবজেক্ট ট্যাগ

আমরা একটি <object> ব্যবহার করতে পারি একটি HTML-এ বিভিন্ন ধরনের মিডিয়া এম্বেড করতে ট্যাগ করুন ওয়েব পেজ উদাহরণস্বরূপ, আপনি HTML5 এম্বেড করতে এই ট্যাগটি ব্যবহার করতে পারেন ভিডিও, অডিও, ফ্ল্যাশ রিসোর্স, অথবা আপনার ওয়েব পেজে পিডিএফ ফাইল। এখানে <object>-এর একটি উদাহরণ দেওয়া হল একটি ওয়েব পৃষ্ঠায় একটি ভিডিও এম্বেড করতে উপাদান ব্যবহার করা হচ্ছে:

<object src="videos/ourVideo.mp4" width="600px" height="400px"></object>

আবার, ব্যবহারকারীদের অবশ্যই <object> এর জন্য Flash ইনস্টল এবং সক্রিয় থাকতে হবে কাজ করতে ট্যাগ করুন। এমনকি যদি আপনি এখনও <object> ব্যবহার করতে চান , <video> ব্যবহার করার কথা বিবেচনা করুন ফ্ল্যাশ ইনস্টল করা নেই এমন ব্যবহারকারীদের জন্য উপাদান বা উভয়ই।

উপসংহার

HTML তিনটি উপাদান রয়েছে যা আপনাকে একটি ওয়েব পৃষ্ঠায় ভিডিও ফাইল এম্বেড করার অনুমতি দেয়:<video> , <object> , এবং <embed> . সুতরাং, আপনি যদি একটি ওয়েবপৃষ্ঠাতে একটি ভিডিও যুক্ত করতে চান তবে আপনাকে এই ট্যাগগুলি ব্যবহার করা উচিত। আজ, আমরা এই ট্যাগগুলির ব্যবহার এবং ব্রাউজার এবং ফ্ল্যাশের সাথে তাদের সামঞ্জস্য নিয়ে আলোচনা করেছি৷

যেকোন ওয়েব পৃষ্ঠায় ভিডিও এম্বেড করার জন্য আপনার প্রয়োজনীয় জ্ঞান এখন আপনি সজ্জিত!