HTML Video ট্যাগের ব্যবহার
বন্ধুরা, আগের দিন HTML <audio> ট্যাগ সম্পর্কে জেনেছিলাম অর্থাৎ একটি অডিও ক্লিপ কিভাবে ওয়েবপেজে দেখানো হয় তা নিয়ে আলোচনা করেছিলাম ।। আজকে এই টিউটোরিয়ালটিতে <video> ট্যাগ সম্পর্কে আলোচনা করবো -----
আপনারা নিশ্চয় লক্ষ্য করেছেন অনেক ওয়েবসাইটে অনেক রকম ভিডিও দেখানো হয় । এই ভিডিও দেখানোর মধ্য দিয়ে ওয়েবসাইট গুলোকে আরো সুন্দর ভাবে প্রদর্শন করানো হয় উজারের সামনে ।
এখন কার সময়ে মানুষ এতোটাই ভিডিও কে ভালোবাসে যে তার কোনো তুলনায় হয় না ।।
কয়েকটি জ্বলন্ত প্রমান হলো YouTube, Tiktok, ইত্যাদি । যতগুলো সোশ্যালসাইট আছে সব গুলোতেই ভিডিও থাকে, আর মানুষ সে গুলো খুব পছন্দও করে । তো আপনারা বুঝতেই পেরেছেন <video> ট্যাগের অবদান ঠিক কতটা , তাহলে আসুন, প্রাক্টিক্যালি করে দেখে নেয় ভিডিও ট্যাগের ব্যবহার ------
<video>
যে কোনো ধরণের ভিডিও সেট করা হয় এই ট্যাগটি ব্যবহার করে ।
<source>
video ট্যাগের সোর্স টা বলে দেয় ঠিক কোথায় আছে ভিডিও ক্লিপ টা ।
উদাহরণ :
<html>
<head>
<title>How to insert a video</title>
</head>
<body>
<video width="400" controls>
<source src="D:\video\status.mp4" type="video/mp4">
</body>
</html>
Video Clip |
উপরে কোড টুকু কপি করে পেস্ট করুন নোটপ্যাডে এবং সেভ করুন index.html এক্সটেনশন দিয়ে তারপরে রান করিয়ে দেখে নিন ঠিক ঠাক কাজ করছে কিনা আর হ্যা অবশ্যই ভিডিও সোর্স টা কিন্তু সঠিক দেবেন নইলে কাজ করবে না ।
আমরা এবারে জানবো autoplay এট্রিবিউট সম্পর্কে ---
এই autoplay এট্রিবিউট টা আবার কি ?
এই autoplay এট্রিবিউট ব্যবহার করে আমরা অটোমেটিক ভিডিও প্লে করতে পারি অর্থাৎ উজারের কাছে কোনো কন্ট্রোল থাকবে না । ব্রাউজার লোড হওয়ার সাথে সাথে music বেজে ওঠার কারণও হলো এই atuoplay এট্রিবিউট । autoplay এট্রিবিউট ব্যবহার করে এগুলো করা হয় ।
তো আসুন, প্রাক্টিক্যালি করে দেখি অটোপ্লেয়ের ব্যবহার টা -----
উদাহরণ :
<html>
<head>
<title>How to insert a video</title>
</head>
<body>
<video width="500" height="500" autoplay>
<source src="D:\video\status.mp4" type="video/mp4">
</body>
</html>
Autoplay Video |
কোডের পাশাপাশি ইমেজ টাও একটু লক্ষ্য করবেন তাহলে আপনারা সহজেই বুঝতে পারবেন ।
হয়তো কিছু কিছু ব্রাউজারে ভিডিও ফরম্যাট সাপোর্ট নাও করতে পারে তার জন্য আপনারা মাল্টিপল ব্রাউজার ব্যবহার করবেন, সহজেই বুঝতে পারবেন ।
HTML সম্পর্কে আরো জানতে ক্লিক করুন ।
ধন্যবাদ ।।
0 মন্তব্যসমূহ