একনজরে HTML Video Tag...

আমাদের ২য় ক্লাসে ভিডিও নিয়ে কাজ করার সময় এত্তগুলো এট্রিবিউট দেখে ঘাবড়ে গিয়েছিলাম। কিভাবে মনে রাখবো বুঝতে পারছিলাম না।

তারপর এগুলোকে ধাপে ধাপে সাজিয়ে দেখলাম সহজেই মনে রাখতে পারছি। তাই ভাবলাম আপনাদের সাথেও শেয়ার করি।

কোনো জিনিস বুঝার আগে জেনে নিতে হয় সেটি কেন হচ্ছে। তাহলেই সহজ হয়ে যায়। যেমন, স্কুলে ভর্তি হওয়ার পর প্রথম অ অ ই ঈ শেখায়। তারপর শব্দ গঠন, এরপর বাক্য গঠন, এরপর সবকিছু। তাই চলুন শুরু করা যাক।

১. ওয়েবপেজের কোনো ফাইলে ভিডিও নেয়ার জন্য প্রথমেই video ট্যাগ নিতে হবে। এটি হচ্ছে ভিডিও-এর মূল ট্যাগ। এর ভেতরেই সবকিছু করতে হবে।

২. ভিডিওটি কোথা থেকে আসবে সেই সোর্স লিংক পেজে যোগ করতে হবে। এজন্য src এট্রিবিউট ব্যবহার করতে হয়।

image

এখন ওয়েবপেজে ভিডিও যোগ হয়ে গেল। কিন্তু ইউজারতো এটাতে কিছু করতে পারবে না। অনেকটাই হাত-পা বেঁধে বুফে খাওয়ার জন্য ছেড়ে দেওয়া হয়ে গেল। তাই না?

৩. তাই ইউজারকে ভিডিওটি কনট্রোল করতে দিতে হবে। হ্যাঁ, এবার এখানে controls এট্রিবিউট যোগ করবো। ফলে ভিডিও কনট্রোল করার ফিচারগুলো দৃশ্যমান হবে। ইউজার তার ইচ্ছামত কাস্টমাইজ করতে পারবে।

৪. আমরা বিভিন্ন জায়গায় দেখি ওয়েবপেজে কিছু ভিডিও অটোমেটিক প্লে হয়ে গিয়েছে। ইউটিউবের ফিডে গেলে যেকোনো ভিডিওতে না ঢুকলেও প্লে হতে থাকে। যদি আমাদের পেজে এই ফিচার যোগ করতে চাই তবে autoplay ব্যবহার করতে হবে।

৫. ধরুন, আপনি পাবলিক প্লেসে বা পরিবারের সবাই বসে আড্ডা দিচ্ছেন। এরকম মুহুর্তে একটু মোবাইল ব্রাউজ করার ইচ্ছা হতেই পারে। তাই না?

তখন যদি ব্রাউজিং এর সময় হুট করে একটা ভিডিও সাউন্ড সহ ওপেন হয়ে যায় কি একটা বিব্রতকর পরিস্থিতি তৈরি হয় বলেন তো? তাই আমরা চাই না আমাদের ইউজাররা এরকম বিব্রত হোক। তাই muted এট্রিবিউট ব্যবহার করে ভিডিওটা মিউট করে দিবো। ফলে Autoplay হলেও শব্দ হবে না।

সহজ ভাষায়, শুধু মাইর হবে, সাউন্ড হবে না :sweat_smile:

৬. কোনো ভিডিও যদি একই পেজে বারবার প্লে করতে চাই, তাহলে loop এট্রিবিউট দিয়ে এটিকরতে পারি। ভিডিও শেষ হওয়ার পর লুপের মতো বারবার প্লে হতে থাকবে।

৭. ওয়েবপেজে ভিডিওটি যেখানে রয়েছে সেখানে স্থির অবস্থায় প্রথম ফ্রেমটি শো হয়ে থাকে। এটাকে প্রফেশনাল করার জন্য একটি পোস্টার ব্যবহার করা যায়। যা ইউটিউব থাম্বনেইলের মতো কাজ করবে। এজন্য poster এট্রিবিউট ব্যবহৃত হয়।

৮. বর্তমানে মানুষের এটেনশন স্প্যান জেলিফিশের চেয়েও কম। তাই ওয়েবপেজের কোনো ভিডিওতে ক্লিক করার পর যদি লোড হতে সময় নেয় তাহলে ইউজার বিরক্ত হয়। এমনকি চলেও যেতে পারে। তাই ওয়েবপেজ লোড হওয়ার সাথে সাথে ভিডিওতি কিছুটা Pre Load করে রাখলে ক্লিক করার সাথে সাথে প্লে হবে।

এজন্য preload এট্রিবিউট ব্যবহার করে ইউজারকে বেটার এক্সপেরিয়েন্স দেওয়া যায়।

৯. আমাদের ওয়েবপেজে ভিডিওটিকে প্রয়োজনমতো সাইজে শো করানোর জন্য দুটি এট্রিবিউট ব্যবহার করতে পারি। width এবং height. এটা নির্দিষ্ট করে দিলে শুধু ঐ অংশটিতেই ভিডিও শো হবে।

১০. এই সবকিছু ঠিক ভাবে করার পরেও কোনো ভিডিও ব্রাউজারে নাও দেখাতে পারে। কারন সব ব্রাউজার সব ধরনের ভিডিও সাপোর্ট করে না। এজন্য ভিডিওটি যদি কয়েকটি ফরম্যাটে থাকে তাহলে video ট্যাগের আন্ডারে ট্যাগ ব্যবহার করে বিকল্প লিংকগুলো দিয়ে দিতে হবে।

image

(source tag ব্যবহার করলে video tag এর মধ্যে src এট্রিবিউট ব্যবহার করতে হবে না)

১১. ১১. video ট্যাগের ভেতরে “Your browser does not support the video tag.” লেখাটি লিখে দিলে খুবই ভালো হয়। তাহলে কোনো কারনে ভিডিও লোড না হলে এই লেখাটি শো করবে। ইউজার বুঝতে পারবে কেন ভিডিও আসছে না।

তাহলে ব্রাউজার তার পছন্দমতো ভিডিওটি শো করবে। এতে ইউজাররা ভিডিওটি ভালো ভাবে দেখতে পারবে।

অর্থাৎ, video tag এর জন্য কোডিং করার পর এটার ফাইনাল কোডটি নীচে সংযুক্ত করা হলো:

আশাকরি, HTML Video Tag বিষয়টি সহজে উপস্থাপন করতে পেরেছি। এরপরও কোনো প্রবলেম হলে জানাবেন, প্লীজ।

4 Likes

খুব ভালো এক্সপ্লেইনেসন :heart:

2 Likes

সুন্দর করে গুছিয়ে লেখার জন্য ধন্যবাদ ভাই

1 Like

সময় নিয়ে লেখাটি পড়ে উৎসাহ দেওয়ার জন্য আপনাকেও অনেক ধন্যবাদ ভাই।

1 Like