ভিডিও (Video)

একটি গল্প দিয়ে শুরু করি

ঢাকার একটি ক্রিকেট ফ্যান ক্লাব তাদের ওয়েবসাইটে বাংলাদেশ বনাম ভারত ম্যাচের হাইলাইট ভিডিও যুক্ত করতে চায়। সভাপতি রনি বললেন: "YouTube-এ দিলে copyright সমস্যা হবে। আমাদের নিজের সার্ভারে রেখে নিজের সাইটে দেখাতে চাই।" ওয়েব ডিজাইনার আসিফ বলল: "HTML5-এ <video> ট্যাগ আছে — ঠিক <audio>-এর মতোই, কিন্তু ভিডিওর জন্য।" রনি বললেন: "সত্যি? YouTube-এর মতো player নিজের সাইটে?"

হ্যাঁ! <video> ট্যাগ দিয়ে এটা সম্ভব।

সমস্যাটা কী ছিল আগে?

<audio>-এর মতোই, HTML5 আসার আগে ওয়েবে ভিডিও দেখাতে Flash plugin লাগত। সমস্যাও একই ছিল — মোবাইলে কাজ করত না, iOS-এ চলত না।

HTML5 দুটো নতুন element দিল:

<audio> — শব্দের জন্য
<video> — ভিডিওর জন্য

ভিজ্যুয়াল মডেল (ASCII Diagram)

HTML ফাইলে <video> ট্যাগ লেখা হলে:

HTML File
┌─────────────────────────────────────────┐
│  <video width="640" height="360"        │
│         controls poster="thumb.jpg">   │
│    <source src="match.mp4"              │
│            type="video/mp4">           │
│  </video>                               │
└─────────────────────────────────────────┘
          │
          ▼
     Browser পড়ে ও বোঝে
          │
          ▼
┌─────────────────────────────────────────┐
│  ┌───────────────────────────────────┐  │
│  │  [Thumbnail/Poster Image দেখায়]  │  │
│  │                                   │  │
│  │        ▶  (Play বোতাম)           │  │
│  │                                   │  │
│  └───────────────────────────────────┘  │
│  ▶ ═══════════════════════ 0:00 🔊 ⛶  │
└─────────────────────────────────────────┘
          │
          ▼
     Play চাপলে ভিডিও বাজে!

মানসিক মডেল (Mental Model)

<video> ট্যাগকে ভাবো একটা টেলিভিশন সেট-এর মতো:

টেলিভিশনের অংশ	HTML Video-তে সমতুল্য
স্ক্রিনের আকার	`width` ও `height` attribute
চ্যানেল (কী দেখাবে)	`src` দিয়ে ফাইলের পাথ
রিমোটের বোতাম	`controls` attribute
অটো চালু	`autoplay` attribute
Repeat	`loop` attribute
Volume zero	`muted` attribute
চালু হওয়ার আগে স্ক্রিনের ছবি	`poster` attribute

মূল ধারণা (Formal Concept)

<video> হলো HTML5-এর একটি multimedia element যা ওয়েব পেজে ভিডিও ক্লিপ প্রদর্শনের জন্য ব্যবহৃত হয়। এটিও <audio>-এর মতো container element — ভেতরে <source> ট্যাগ দিয়ে ভিডিও ফাইলের তথ্য দেওয়া হয়।

Module 1: সবচেয়ে সহজ `<video>` ট্যাগ

<video controls>
  <source src="cricket-highlight.mp4" type="video/mp4">
  আপনার browser ভিডিও সমর্থন করে না।
</video>

লাইন ধরে বিশ্লেষণ:

অংশ	অর্থ
`<video>`	ভিডিও container শুরু
`controls`	Play/Pause/Volume/Fullscreen বার দেখাও
`<source>`	ভিডিও ফাইলের তথ্য (self-closing tag)
`src="cricket-highlight.mp4"`	ফাইলের নাম ও পাথ
`type="video/mp4"`	ফাইলটি MP4 ফরম্যাটের (MIME type)
শেষ লাইন	Fallback text: browser না বুঝলে দেখাবে
`</video>`	ভিডিও container শেষ

Module 2: Attributes (বৈশিষ্ট্যসমূহ) বিস্তারিত

2.1 `controls` — প্লেয়ার বার দেখানো

<!-- controls ছাড়া: ভিডিও দেখা যাবে কিন্তু বাজানো যাবে না! -->
<video src="video.mp4" width="400"></video>

<!-- controls সহ: সম্পূর্ণ ভিডিও player -->
<video src="video.mp4" width="400" controls></video>

Controls-এ যা থাকে: Play/Pause বোতাম, Progress bar, Volume control, Fullscreen বোতাম।

2.2 `width` ও `height` — আকার নির্ধারণ

<video src="natok.mp4" controls width="640" height="360"></video>

📝 HSC টিপস:

width ও height Pixel (পিক্সেল — পর্দার বিন্দু) এ দেওয়া হয়
শুধু width দিলে browser নিজে height proportionally ঠিক করে
সাধারণত aspect ratio 16:9 মেনে চলা ভালো (যেমন: 640×360, 1280×720)

2.3 `poster` — থাম্বনেইল ছবি

<video controls width="640" height="360"
       poster="images/match-thumbnail.jpg">
  <source src="videos/match.mp4" type="video/mp4">
</video>

ভিডিও play হওয়ার আগে poster ছবি দেখা যাবে — ঠিক YouTube-এর thumbnail-এর মতো।

2.4 `autoplay` — পেজ লোড হলেই বাজবে

<video src="intro.mp4" controls autoplay muted></video>

⚠️ সতর্কতা: autoplay একা কাজ নাও করতে পারে। muted যুক্ত করলে browser autoplay allow করে।

2.5 `loop` — বারবার বাজবে

<!-- bKash tutorial video যা বারবার দেখাবে -->
<video src="bkash-tutorial.mp4" controls loop></video>

2.6 `muted` — নিঃশব্দ অবস্থায় শুরু

<video src="promo.mp4" controls muted width="600"></video>

2.7 `preload` — আগে লোড করার নীতি

<video src="video.mp4" controls preload="metadata"></video>

<audio>-এর মতোই: auto | metadata | none।

Module 3: ভিডিও ফরম্যাট ও `<source>` ট্যাগ

ভিডিও ফরম্যাট তুলনা

ফরম্যাট	Extension	MIME Type	সাপোর্ট	বৈশিষ্ট্য
MP4	`.mp4`	`video/mp4`	সব browser	সবচেয়ে প্রচলিত, H.264 codec
WebM	`.webm`	`video/webm`	Chrome, Firefox, Edge	Google-এর open-source ফরম্যাট
OGG	`.ogg`	`video/ogg`	Chrome, Firefox	Open-source, কম ব্যবহৃত

Browser সাপোর্ট চার্ট:
              Chrome   Firefox   Safari   Edge
MP4             ✓        ✓         ✓       ✓
WebM            ✓        ✓         ✓       ✓
OGG             ✓        ✓         ✗       ✓

একাধিক Source — সব Browser-এর জন্য

<video controls width="640" height="360">
  <source src="cricket.webm" type="video/webm">
  <source src="cricket.mp4"  type="video/mp4">
  <source src="cricket.ogg"  type="video/ogg">
  আপনার browser HTML5 ভিডিও সমর্থন করে না।
</video>

Browser আসে
    │
    ▼
WebM বুঝি? ──হ্যাঁ──► WebM বাজাও (শেষ)
    │ না
    ▼
MP4 বুঝি?  ──হ্যাঁ──► MP4 বাজাও (শেষ)
    │ না
    ▼
OGG বুঝি?  ──হ্যাঁ──► OGG বাজাও (শেষ)
    │ না
    ▼
Fallback text দেখাও

Module 4: `<track>` ট্যাগ — Subtitle/Caption যোগ করা

<video controls width="640">
  <source src="natok.mp4" type="video/mp4">
  <track src="subtitles-bn.vtt" kind="subtitles"
         srclang="bn" label="বাংলা" default>
  <track src="subtitles-en.vtt" kind="subtitles"
         srclang="en" label="English">
</video>

attribute	অর্থ
`kind="subtitles"`	এটি subtitle ট্র্যাক
`srclang="bn"`	ভাষা: বাংলা
`label="বাংলা"`	User interface-এ দেখাবে
`default`	এটি default-এ চালু থাকবে

Module 5: YouTube Embed vs Native Video Tag

অনেক সময় নিজের সার্ভারে ভিডিও না রেখে YouTube থেকে embed করা হয়। দুটো পদ্ধতির তুলনা:

<!-- পদ্ধতি ১: HTML5 Native <video> tag -->
<video controls width="640" height="360">
  <source src="videos/match.mp4" type="video/mp4">
</video>

<!-- পদ্ধতি ২: YouTube iframe embed -->
<iframe width="640" height="360"
  src="https://www.youtube.com/embed/VIDEO_ID"
  allowfullscreen>
</iframe>

বিষয়	Native `<video>`	YouTube `<iframe>`
ফাইল কোথায়	নিজের সার্ভারে	YouTube-এ
সার্ভার খরচ	বেশি (নিজে host করতে হয়)	বিনামূল্যে
Copyright	নিজের ভিডিও হলে কোনো সমস্যা নেই	YouTube-এর নিয়ম মানতে হয়
Control	সম্পূর্ণ নিজের হাতে	YouTube-এর UI নির্ভর
গোপনীয়তা	সম্পূর্ণ নিজের	YouTube ডেটা সংগ্রহ করে
ব্যান্ডউইথ	নিজের সার্ভারের	YouTube বহন করে

Module 6: সম্পূর্ণ উদাহরণ — ক্রিকেট হাইলাইট পেজ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>বাংলাদেশ ক্রিকেট হাইলাইট</title>
</head>
<body>
  <h1>বাংলাদেশ বনাম ভারত — শেষ ওভারের থ্রিলার</h1>

  <video controls width="800" height="450"
         poster="images/match-poster.jpg"
         preload="metadata">
    <source src="videos/bd-ind-highlight.webm" type="video/webm">
    <source src="videos/bd-ind-highlight.mp4"  type="video/mp4">
    <track src="subtitles/commentary-bn.vtt"
           kind="subtitles" srclang="bn"
           label="বাংলা ধারাভাষ্য" default>
    দুঃখিত, আপনার browser ভিডিও সমর্থন করে না।
    <a href="videos/bd-ind-highlight.mp4">ডাউনলোড করুন</a>
  </video>

  <h2>bKash ব্যবহারের টিউটোরিয়াল</h2>
  <video controls width="560" height="315" loop
         poster="images/bkash-thumb.jpg">
    <source src="videos/bkash-tutorial.mp4" type="video/mp4">
  </video>
</body>
</html>

Module 7: Audio vs Video ট্যাগ তুলনা

বিষয়	`<audio>`	`<video>`
কী বাজায়	শুধু শব্দ	শব্দ + ছবি
দৃশ্যমান অংশ	শুধু player bar	Player + ভিডিও ফ্রেম
ফরম্যাট	MP3, WAV, OGG	MP4, WebM, OGG
MIME Type (MP3/MP4)	`audio/mpeg`	`video/mp4`
`poster` attribute	নেই	আছে
`width`/`height`	নেই	আছে
`<track>` ব্যবহার	সাধারণত না	হ্যাঁ (subtitle)
মিল	controls, autoplay, loop, muted, preload, `<source>` — সব একই

সাধারণ ভুলসমূহ (Common Mistakes)

ভুল	সমস্যা	সঠিক পদ্ধতি
`type="mp4"`	ভুল MIME type	`type="video/mp4"`
`<video/>` (self-closing)	ভুল গঠন	`<video></video>` দিয়ে বন্ধ করো
`controls` না দেওয়া	ভিডিও বাজানো যাবে না	সবসময় `controls` দাও
শুধু OGG ফরম্যাট	Safari-তে বাজবে না	MP4 fallback রাখো
poster-এ ভুল পাথ	thumbnail দেখাবে না	সঠিক image পাথ দাও

Trade-offs (সুবিধা-অসুবিধা)

বিষয়	সুবিধা	অসুবিধা
Native `<video>`	নিজের নিয়ন্ত্রণ, কোনো বিজ্ঞাপন নেই	সার্ভার স্টোরেজ ও ব্যান্ডউইথ বেশি লাগে
YouTube embed	বিনামূল্যে, দ্রুত	নিজের নিয়ন্ত্রণ কম, বিজ্ঞাপন আসতে পারে
`autoplay` + `muted`	Silent background video	User সচেতন না হলে বিভ্রান্তি
একাধিক `<source>`	সব browser কাভার	বেশি ফাইল রাখতে হয়

MCQ Quiz

1. HTML5-এ ওয়েব পেজে ভিডিও যুক্ত করতে কোন ট্যাগ ব্যবহার করা হয়?

(ক) <movie>
(খ) <media>
(গ) <video> ✓
(ঘ) <clip>

2. ভিডিও চালু হওয়ার আগে একটি থাম্বনেইল ছবি দেখানোর জন্য কোন attribute ব্যবহার করা হয়?

(ক) thumbnail
(খ) image
(গ) poster ✓
(ঘ) cover

3. MP4 ভিডিও ফাইলের সঠিক MIME type কোনটি?

(ক) type="mp4"
(খ) type="movie/mp4"
(গ) type="video/mp4" ✓
(ঘ) type="media/mp4"

4. YouTube-এর ভিডিও নিজের ওয়েব পেজে দেখাতে কোন HTML element ব্যবহার করা হয়?

(ক) <video>
(খ) <embed>
(গ) <iframe> ✓
(ঘ) <frame>

5. <video> ট্যাগে subtitle যোগ করতে কোন ট্যাগ ব্যবহার করা হয়?

(ক) <sub>
(খ) <caption>
(গ) <track> ✓
(ঘ) <text>

6. <audio> ও <video> ট্যাগের মধ্যে কোন attribute শুধু <video>-তে আছে?

(ক) controls
(খ) loop
(গ) poster ✓
(ঘ) autoplay

7. কোন ভিডিও ফরম্যাট সব প্রধান browser সমর্থন করে?

(ক) শুধু WebM
(খ) MP4 ✓
(গ) শুধু OGG
(ঘ) শুধু AVI

প্রতিফলন প্রশ্ন (Reflection Questions)

<audio> ও <video> ট্যাগের মধ্যে কী কী মিল এবং কী কী পার্থক্য আছে?
poster attribute কেন গুরুত্বপূর্ণ? এটি না থাকলে কী দেখা যায়?
নিজের সার্ভারে ভিডিও রাখা ভালো না YouTube embed করা — কোন পরিস্থিতিতে কোনটি বেছে নেবে?
<track> ট্যাগ কোন ধরনের content-এর জন্য গুরুত্বপূর্ণ?
width শুধু দিলে height না দেওয়া কি ঠিক আছে? কেন?

অনুশীলন কাজ (Practice Tasks)

সহজ: একটি HTML পেজ তৈরি করো যেখানে একটি MP4 ভিডিও controls ও width="600" সহ দেখাবে।
মধ্যম: একটি ক্রিকেট হাইলাইট পেজ তৈরি করো — poster ছবি, width/height, এবং MP4 ও WebM উভয় source সহ।
উন্নত: একটি "বাংলা নাটক" পেজ তৈরি করো যেখানে:
- তিনটি নাটকের ভিডিও থাকবে
- প্রতিটিতে poster, controls, loop থাকবে
- বাংলা subtitle এর জন্য <track> ট্যাগ থাকবে

📝 HSC পরীক্ষার টিপস:

<video> ট্যাগ HTML5-এর নতুন সংযোজন — <audio> ট্যাগের সাথে তুলনা করে শেখো
poster attribute শুধু <video>-তে আছে, <audio>-তে নেই — এটি গুরুত্বপূর্ণ পার্থক্য
MIME type মনে রাখো: MP4 = video/mp4, WebM = video/webm, OGG = video/ogg
width ও height pixel-এ দেওয়া হয়
<track> ট্যাগ subtitle/caption-এর জন্য
YouTube embed-এ <iframe> ব্যবহার হয়, <video> নয়

সারাংশ:

<video> ট্যাগ HTML5-এর multimedia element — ওয়েব পেজে ভিডিও দেখানো যায়

<audio>-এর সব attribute <video>-তেও আছে: controls, autoplay, loop, muted, preload

<video>-র বিশেষ attributes: width, height (আকার) এবং poster (thumbnail)

ভিডিও ফরম্যাট: MP4 (সবচেয়ে নির্ভরযোগ্য), WebM (open-source), OGG (কম প্রচলিত)

<track> ট্যাগ দিয়ে subtitle/caption যোগ করা যায়

YouTube ভিডিও embed করতে <iframe> ব্যবহার হয়, <video> নয়

Browser compatibility-র জন্য একাধিক <source> রাখো: WebM → MP4 ক্রমে

Video