কম্পিউটার টিউটোরিয়াল

HTML-এ ভিডিও এম্বেড করা: ধাপে ধাপে গাইড

এইচটিএমএল ডকুমেন্টে ভিডিও এম্বেড করার জন্য আপনি এই ট্যাগগুলো ব্যবহার করতে পারেন: <video>, <object>, এবং <embed>। প্রতিটি ভিন্নভাবে কাজ করে, কিন্তু সবই ভিডিওর URL নির্দেশ করার জন্য src অ্যাট্রিবিউট ব্যবহার করে।


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

এইচটিএমএল-এ ভিডিও এম্বেড করার кільomere উপায় রয়েছে। এই গাইডে আমরা তিনটি পদ্ধতি আলোচনা করব: <video>, <object>, এবং <embed> ট্যাগ ব্যবহার করে।

ভিডিও ট্যাগ

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

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

<video controls="controls" src="videos/ourVideo.mp4"> এই ব্রাউজার ভিডিও এলিমেন্ট সাপোর্ট করে না। </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"> এই ব্রাউজার ভিডিও এলিমেন্ট সাপোর্ট করে না। </video>

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

এম্বেড ট্যাগ

এছাড়াও, <embed> এলিমেন্ট ব্যবহার করে ভিডিও এবং অন্যান্য মাল্টিমিডিয়া এইচটিএমএল ওয়েব পেজে এম্বেড করা যায়। এখানে একটি অ্যাডোব ফ্ল্যাশ ভিডিও রেফারেন্স করার উদাহরণ দেওয়া হল:

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

এই কোড ওয়েব পেজে একটি ফ্ল্যাশ ভিডিও রেন্ডার করবে। আমরা width এবং height প্যারামিটার দিয়ে ভিডিও প্লেয়ারের আকার নির্দিষ্ট করেছি। এখানে প্লেয়ারের আকার ৬০০×৪০০ পিক্সেল।

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

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

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

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

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

উপসংহার

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

এখন আপনি যেকোনো ওয়েব পেজে ভিডিও এম্বেড করার জ্ঞান অর্জন করেছেন!


  1. HTML DOM Video autoplay প্রোপার্টি

  2. HTML DOM Video play() মেথড

  3. HTML DOM Video paused প্রোপার্টি

  4. HTML DOM Video অবজেক্ট