অডিও এবং ভিডিও এলিমেন্টগুলি কীভাবে কাজ করে?

Question

Accepted Answer

`<audio>` এবং `<video>` মিডিয়া নেটিভভাবে এমবেড করে, বিল্ট-ইন কন্ট্রোল এবং একটি JavaScript API সহ — কোনো প্লাগইনের প্রয়োজন নেই।

```html
<video
  controls                    
  width="640"
  poster="thumbnail.jpg"      
  preload="metadata"          
>
  <source src="video.webm" type="video/webm" /> 
  <source src="video.mp4" type="video/mp4" />   
  <track kind="captions" src="caps.vtt" srclang="en" label="English" /> 
  Your browser does not support video.          
</video>
```

## মূল বৈশিষ্ট্য

- **`controls`** — ছাড়া, কোনো UI প্রদর্শিত হয় না (আপনি JS এর মাধ্যমে নিয়ন্ত্রণ করবেন)।
- **একাধিক `<source>`** — ব্রাউজার প্রথম ফর্ম্যাট ব্যবহার করে যা এটি সমর্থন করে (ক্রস-ব্রাউজার এর জন্য WebM/MP4)।
- **`poster`** — প্লে করার আগে প্লেসহোল্ডার ইমেজ।
- **`preload`** — `none` / `metadata` / `auto`; বড় ফাইল না ডাউনলোড করতে `metadata` ব্যবহার করুন যতক্ষণ না প্রয়োজন হয়।
- **`autoplay muted loop`** — ব্যাকগ্রাউন্ড ভিডিওর জন্য (বেশিরভাগ ব্রাউজার **autoplay অনুমতি দিতে `muted` প্রয়োজন**)।
- **`<track>`** — অ্যাক্সেসিবিলিটির জন্য ক্যাপশন/সাবটাইটেল (একটি `.vtt` ফাইল)।

## JavaScript দিয়ে নিয়ন্ত্রণ করা

```js
const v = document.querySelector("video");
v.play();           // returns a promise (may reject if autoplay blocked)
v.pause();
v.currentTime = 30; // seek to 30 seconds
v.volume = 0.5;
v.addEventListener("ended", () => console.log("finished"));
```

`<audio>` অনুরূপভাবে কাজ করে, শুধুমাত্র ভিজ্যুয়াল ফ্রেম/পোস্টার ছাড়াই।

## কেন এটি গুরুত্বপূর্ণ

নেটিভ মিডিয়া এলিমেন্টগুলি আপনাকে ক্রস-ব্রাউজার প্লেব্যাক, অ্যাক্সেসিবিলিটি (ক্যাপশন `<track>` এর মাধ্যমে), এবং কাস্টম প্লেয়ারদের জন্য সম্পূর্ণ JS API প্রদান করে।

ফর্ম্যাট-ফলব্যাক প্যাটার্ন, autoplay এর জন্য `muted`-রুল, এবং পারফরম্যান্সের জন্য `preload` জানা মিডিয়া এমবেডিং এর ব্যবহারিক প্রয়োজনীয়তা কভার করে।