সিরিজের নবম পর্ব — Media Elements।
আগের পর্বে আমরা শিখেছি Div, Span ও Layout বেসিক। আজকে শিখবো ওয়েবপেজে অডিও, ভিডিও, আর অন্য ওয়েবসাইটের কন্টেন্ট এমবেড করা কীভাবে করতে হয়।
<video> ট্যাগ
ভিডিও দেখানোর জন্য ব্যবহার হয় <video> ট্যাগ:
<video src="movie.mp4" controls width="500"></video>
কিছু গুরুত্বপূর্ণ অ্যাট্রিবিউট:
| Attribute | কাজ |
|---|---|
controls |
প্লে/পজ/ভলিউম বাটন দেখায় |
autoplay |
পেজ লোড হলেই ভিডিও চলা শুরু হয় |
loop |
ভিডিও শেষ হলে আবার প্রথম থেকে চলে |
muted |
সাউন্ড বন্ধ রাখে |
poster |
ভিডিও প্লে হওয়ার আগে যে থাম্বনেইল দেখাবে |
টিপস: সব ব্রাউজার সব ভিডিও ফরম্যাট সাপোর্ট করে না। এজন্য একাধিক <source> দিয়ে ফলব্যাক দেওয়া ভালো অভ্যাস:
<video controls width="500"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> তোমার ব্রাউজার ভিডিও ট্যাগ সাপোর্ট করে না। </video>
এখানে H.264/AAC কোডেকের mp4 ফাইল ব্যবহার করাই সবচেয়ে নিরাপদ, কারণ এটা প্রায় সব ব্রাউজার ও প্ল্যাটফর্মে (এমনকি Telegram Instant View-এর মতো জায়গায়ও) সমস্যা ছাড়া চলে।
<audio> ট্যাগ
অডিও ফাইল চালানোর জন্য ব্যবহার হয় <audio> ট্যাগ, একদম <video>-এর মতোই:
<audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> তোমার ব্রাউজার অডিও ট্যাগ সাপোর্ট করে না। </audio>
এখানেও একই অ্যাট্রিবিউট কাজ করে — controls, autoplay, loop, muted।
টিপস: autoplay সাধারণত এড়িয়ে চলা উচিত — বেশিরভাগ আধুনিক ব্রাউজার সাউন্ডসহ autoplay ব্লক করে দেয়, আর ইউজার নিজে থেকে হঠাৎ শব্দ শুনতে পছন্দ করে না। যদি autoplay দরকারই হয়, তাহলে সাথে muted ব্যবহার করা উচিত।
<iframe> — অন্য ওয়েবসাইট এমবেড করা
ইউটিউব ভিডিও, গুগল ম্যাপ, বা অন্য কোনো ওয়েবসাইটের কন্টেন্ট নিজের পেজের ভেতরে দেখাতে <iframe> ব্যবহার হয় — এটা মূলত একটা পেজের ভেতরে আরেকটা পেজ:
<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" allowfullscreen> </iframe>
| Attribute | কাজ |
|---|---|
src |
কোন পেজ এমবেড হবে |
width / height |
এমবেড করা ফ্রেমের সাইজ |
allowfullscreen |
ফুলস্ক্রিন মোডে দেখার অনুমতি দেয় |
loading="lazy" |
iframe স্ক্রিনে না আসা পর্যন্ত লোড হয় না — পেজ দ্রুত লোড হয় |
<iframe src="https://www.google.com/maps/embed?..." width="600" height="450" loading="lazy"> </iframe>
টিপস: নিরাপত্তার কারণে সবসময় নিজের চেনা ও বিশ্বাসযোগ্য সোর্স থেকেই iframe এমবেড করা উচিত, কারণ iframe মূলত অন্য একটা ওয়েবসাইটকে সরাসরি তোমার পেজে নিয়ে আসে।
একটা সম্পূর্ণ উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Media উদাহরণ</title>
</head>
<body>
<h1>আমার মিডিয়া পেজ</h1>
<h2>ভিডিও</h2>
<video controls width="500" poster="thumbnail.jpg">
<source src="intro.mp4" type="video/mp4">
তোমার ব্রাউজার ভিডিও সাপোর্ট করে না।
</video>
<h2>অডিও</h2>
<audio controls>
<source src="theme-song.mp3" type="audio/mpeg">
</audio>
<h2>ইউটিউব ভিডিও</h2>
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
width="560"
height="315"
loading="lazy"
allowfullscreen>
</iframe>
</body>
</html>
নিজে চেষ্টা করো
Exercise:
- একটা ছোট mp4 ফাইল নিয়ে
<video>ট্যাগ দিয়ে দেখাও,controlsসহ - একটা mp3 ফাইল দিয়ে
<audio>প্লেয়ার বানাও - একটা ইউটিউব ভিডিওর embed link দিয়ে
<iframe>বসাও
পরের পর্বে যা থাকছে
পর্ব ১০-এ, সিরিজের শেষ পর্বে, আমরা এখন পর্যন্ত শেখা সবকিছু একসাথে ব্যবহার করে একটা সম্পূর্ণ Mini Project — একটা সিম্পল ল্যান্ডিং পেজ বানাবো।
প্রশ্ন থাকলে কমেন্টে জানাতে পারো।