HTML <video>
ট্যাগ: এক অসাধারণ প্রেমের গল্প
সব শুরু হয়েছিল এক অলস দুপুরে। কাজের চাপ নেই, সময় যেন থমকে আছে। ঠিক তখনই ক্লায়েন্টের একটি ইমেল এসে হাজির—“হোমপেজে একটা ভিডিও অ্যাড করা যাবে? সেটাকে যেন একটু ইন্টারেক্টিভ লাগে।”
আমি তখন ফ্রিল্যান্সার জীবনের সেই প্রথম দিককার দিনগুলো পার করছি। কোডিং জানি, সিএসএস জানি। কিন্তু ভিডিও? সেটা তো কখনও করা হয়নি। তবুও, আমি আত্মবিশ্বাস নিয়ে রিপ্লাই দিলাম, “অবশ্যই! এটা খুব সহজ।”
(অবশ্যই সহজ… গুগল ছাড়া।)
প্রথম দেখা: <video>
-র সাথে পরিচয়
রাতে ল্যাপটপ খুলে বসি। মাউসের কার্সর জ্বলজ্বল করছে। আমি <video>
লিখে কি-বোর্ডে আঘাত করি। তারপর এক মিনিট চুপচাপ তাকিয়ে থাকি। কিছুই হচ্ছে না। আমার মাথায় তখন একটাই প্রশ্ন, “এখন কী করব?”
অতঃপর <source>
হাজির হলো। যেন কোনো মুভির মতো নায়ক-নায়িকার প্রথম দেখার দৃশ্য।
<video controls>
<source src="promo.mp4" type="video/mp4">
</video>
আমি প্রথম ভিডিও চালালাম। প্লে-বাটনে ক্লিক করতেই স্ক্রিনে ক্লায়েন্টের দেয়া প্রোমো ভিডিও চলতে শুরু করল। আমার হাততালি দিতে ইচ্ছে করছিল। মনে হচ্ছিল, “আমি সফল!”
প্রেম গভীর হলো
আমাদের সম্পর্কটা ধীরে ধীরে গভীর হতে লাগল। <video>
তার বিশেষত্ব দেখাতে শুরু করল।
controls
: ইউজাররা নিজেরা প্লে-পজ করতে পারবে। আমি ভাবলাম, “এটা তো একেবারে ইউজার-ফ্রেন্ডলি।”autoplay
: ভিডিও খুলতেই নিজে থেকে চলতে শুরু করল। কিন্তু ভয় পেয়ে গেলাম, কারণ সাউন্ড একবারেই “BOOM!” করে বাজল।muted
: মনে হলো, এটা ব্যবহার না করলে ভিডিও একবারেই “দাগী প্রেমিক” হয়ে যাবে।loop
: ক্লায়েন্ট বলল, ভিডিওটা বারবার চালাতে হবে। আমি তখন<loop>
অ্যাট্রিবিউট যোগ করলাম। ভিডিও ঘুরে ঘুরে চলতে লাগল, যেন এক চিরন্তন প্রেমের গান।poster
: ভিডিও লোড হওয়ার আগে ক্লায়েন্টের লোগো দেখানোর অপশন পেলাম। এটা যেন কোনো সুগন্ধি চিঠির উপর গোলাপ ফুল রেখে প্রিয়জনকে অপেক্ষায় রাখার মতো।
<video controls autoplay muted loop poster="logo.jpg">
<source src="promo.mp4" type="video/mp4">
</video>
আমি <video>
-র এই গুণগুলো আবিষ্কার করতে করতে একরকম প্রেমে পড়ে গেলাম।
প্রথম ঝগড়া: ব্রাউজার বিভ্রাট
যেমনটা সব ভালোবাসার গল্পে হয়, আমাদের সম্পর্কেও সমস্যা দেখা দিল। ক্লায়েন্ট বলল, ভিডিও সবার ব্রাউজারে চলছে না।
আমি তখন প্রথমবার বুঝলাম, ব্রাউজারগুলোও মানুষের মতো—সবাই সবকিছু মেনে নেয় না।
কিছু ব্রাউজার .mp4
সাপোর্ট করে, কিছু .webm
, আর কিছু .ogg
। তখন আমি <source>
ট্যাগে একাধিক ফরম্যাট যোগ করলাম।
<video controls poster="logo.jpg">
<source src="promo.mp4" type="video/mp4">
<source src="promo.webm" type="video/webm">
<source src="promo.ogg" type="video/ogg">
আপনার ব্রাউজার ভিডিও চালাতে পারছে না। <a href="promo.mp4">ডাউনলোড করুন</a>।
</video>
আমার কোড ঠিক কাজ করল। আমি ক্লায়েন্টের কাছে রিপোর্ট দিলাম, আর মনে মনে ভাবলাম, “আমার <video>
-র জন্য ভালোবাসা এখন আরও গভীর।”
অ্যাক্সেসিবিলিটি: সম্পর্কের পূর্ণতা
ক্লায়েন্ট বলল, ভিডিওর সাথে সাবটাইটেল দিতে হবে। আমি <track>
ট্যাগ ব্যবহার করে সাবটাইটেল যোগ করলাম।
এটা যেন আমাদের সম্পর্ককে এক নতুন উচ্চতায় নিয়ে গেল।
<video controls>
<source src="promo.mp4" type="video/mp4">
<track src="subs.vtt" kind="subtitles" srclang="en" label="English">
</video>
ক্লায়েন্ট খুব খুশি হলো। ভিডিও চলতে চলতে সাবটাইটেল দেখাচ্ছিল, আর আমার মনে হচ্ছিল, “এটা তো শুধু একটা ভিডিও নয়; এটা একটা গল্প বলছে।”
স্টাইলিং: সৌন্দর্যের শেষ নেই
ক্লায়েন্ট বলল, ভিডিওটাকে আরও সুন্দর দেখাতে হবে। আমি CSS দিয়ে এর চারপাশে বর্ডার, শ্যাডো, এবং গোলাকার কর্নার যোগ করলাম।
<video class="styled-video" controls>
<source src="promo.mp4" type="video/mp4">
</video>
<style>
.styled-video {
width: 80%;
max-width: 600px;
border: 5px solid #4CAF50;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
</style>
ভিডিও দেখতে এতটা সুন্দর লাগছিল যে ক্লায়েন্ট বলল, “আপনি ম্যাজিক করেছেন!”
শেষমেশ প্রেমের পূর্ণতা
<video>
শুধু একটা HTML ট্যাগ নয়। এটা যেন আমার ওয়েবসাইটের প্রাণ। এটা কেবল প্রজেক্টের অংশ নয়; এটা আমার গল্প বলার সঙ্গী।
আমি এখন বুঝি, <video>
-র মতো কেউ নেই। সেটা যেমন গল্প শোনায়, তেমনি জীবনে প্রাণ এনে দেয়। আর ক্লায়েন্ট? তারা তো একেবারে মুগ্ধ।
তাই <video>
নিয়ে আমার এই ভালোবাসার গল্প সবার জন্য। কখনো ভয় পাবেন না। কোডিং করতে গিয়ে যদি <video>
-র সাথে ঝামেলা হয়, মনে রাখবেন, এটা একটা প্রেমের গল্পের মতো। আর সব প্রেমের গল্পেই কিছু নাটক থাকে।
শেষ কথা: <video>
আমার ওয়েবসাইটে কেবল একটা ট্যাগ নয়—এটা আমার ভালোবাসা, আমার সৃজনশীলতার সঙ্গী।