এইচটিএমএল ১০ : ভিডিও যুক্ত করা

তুসিন আহমেদ, টেক শহর কনটেন্ট কাউন্সিলর : একটি ওয়েবসাইটকে আরও আকর্ষণীয় করে তুলতে অনেক সময় ভিডিও যুক্ত করা হয়। এইচটিএমএলের মাধ্যমে কিভাবে ওয়েবসাইটে ভিডিও যুক্ত করা যায় তা আজকের টিউটোরিয়ালে তুলে ধরা হয়েছে।

এর আগের পর্বে এইচটিএমএলে কিভাবে মন্তব্য যুক্ত করতে হয় তা তুলে ধরা হয়েছিল।

প্রথমে নিচের ছবিটি লক্ষ্য করুণ। এখানে একটি ভিডিও আছে। যদি ভিডিওটির প্লে বাটনে ক্লিক করা হয়, তাহলে ভিডিও চালু হবে।

Techshohor Youtube

ভিডিওটি চালুর জন্য নিচের কোডগুলো লেখা হয়েছে

<!DOCTYPE html>
<html>
<head>
<title> video in html</title>
</head>
<body>
<video width=”520″ height=”320″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
The video tag is not supported
</video>

</body>
</html>

এভাবে ‘video’ ট্যাগটি যে কোনো ভিডিও ফাইলকে চিহ্নিত করে। আপনি যে ভিডিওটি যুক্ত করতে চান তার সবটুকু কাজ এই ট্যাগের মধ্যে হবেই।

ভিডিও ট্যাগের মধ্যে রয়েছে  ‘<source>’। এটি দ্বারা ভিডিওটি কোথায় আছে তা নির্দেশ করে।

<source src=”movie.mp4″ type=”video/mp4″>

এই কোডে সোর্স লেখা ‘movie.mp4’-এর মানে হলো এইচটিএমএলের কোড ফাইলটি যে ফোল্ডারে রয়েছে, সেখানে মুভি এমপিফোর নামে একটি ভিডিও ফাইল রয়েছে।

আর ‘type’ দ্বারা বুঝানো হয়েছে ভিডিও ফাইল ফরম্যাট। যদি আপনার ভিডিওটি movie ফরম্যাটের হয়, তাহলে type-এর পরে তা লিখতে হবে।

‘controls’ এট্রিবিউটটি ভিডিও নিয়ন্ত্রণ করার ক্ষমতা দেয়। এই এট্রিবিউট দ্বারা ভিডিও চালু করা, বন্ধ করা ও ভলিউম নিয়ন্ত্রণ করা যাবে।

এইচটিএমএলের মাধ্যমে কোনো ভিডিও যুক্ত করতে হলে এতে অবশ্যই সাইজ নির্ধারণ করতে হবে। তা না হলে ওয়েবপেইজে ভিডিও লোড হওয়ার সময় সাইজ ঠিক থাকবে না।

‘<video width=”520″ height=”320″ controls>’ এই কোডের মধ্যে ভিডিওয়ের সাইজ নির্ধারণ করা হয়েছে। ‘width’ ও ‘height’ ব্যবহারকারী ইচ্ছামত পরিবর্তন করতে পারবেন।

যদি কোনো ব্রাউজার ভিডিও সাপোর্ট না করে, তাহলে <video> ট্যাগের মধ্যে থাকা টেক্সট অংশটুকু প্রদর্শিত হবে। যেমন উপরের কোডে লেখা  ‘The video tag is not supported’ টেক্সট লেখা রয়েছে। তাই সাপোর্ট না কলে এ লেখাটুকু প্রদর্শিত হবে।

*

*

আরও পড়ুন