এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

এইচটিএমএল(৫) ভিডিও


এইচটিএমএল(৫) এর পূর্বে প্লাগ-ইন ব্যবহার করে ব্রাউজারে ভিডিও চালানো হতো। কিন্তু বর্তমানে আমরা এইচটিএমএল(৫) ট্যাগ ব্যবহার করে সরাসরি ব্রাউজারের মধ্যে ভিডিও চালাতে পারি।

এক নজরে এইচটিএমএল(৫) ভিডিও ট্যাগ সমুহ

ট্যাগ বর্ণনা
<video> যে কোনো ধরনের ভিডিও বা চলচ্চিত্র ডিফাইন করে।
<source> <video> এবং <audio> ট্যাগের জন্য মিডিয়া ফাইলের উৎস ডিফাইন করে।
<track> মিডিয়ার জন্য সাব-টাইটেল অথবা যে কোনো ধরনের টেক্সট(পড়ার উপযুক্ত) ডিফাইন করে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

<video width="400" controls>
  <source src="satt_intro.mp4" type="video/mp4">
  আপনার ব্রাউজার এইচটিএমএল ৫ ভিডিও সমর্থণ করে না।
</video>

</body>
</html>

ফলাফল




ব্রাউজার সাপোর্ট

এলিমেন্ট Google Chrome Edge/IE Mozila Firefox Safari Opera
<video> ৪.০ ৯.০ ৩.৫ ৪.০ ১০.৫



<video> এলিমেন্ট

এইচটিএমএলে ভিডিও প্রদর্শনের জন্য <video> এলিমেন্ট ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title><video> এলিমেন্ট</title>
</head>
<body>

<video width="320" height="240" controls>
  <source src="satt_intro.webm" type="video/webm">
  <source src="satt_intro.mp4" type="video/mp4">
  <source src="satt_intro.ogg" type="video/ogg">
  দুঃখিত,আপনার ব্রাউজার ভিডিও ট্যাগ সমর্থণ করে না।
</video>

</body>
</html>

ফলাফল




উদাহরণের ব্যাখ্যা

controls এট্রিবিউটটি ভিডিও চালু করা, বন্ধ করা এবং ভলিউম নিয়ন্ত্রন করার ক্ষমতা দেয়। সবসময় height এবং width এট্রিবিউট ব্যবহার করতে হবে। এই এট্রিবিউটগুলো ব্যবহার না করলে ভিডিও লোড হওয়ার পর পেজের গঠন পরিবর্তন হয়ে যাবে।

যে সকল ব্রাউজারে <video> এলিমেন্ট সাপোর্ট করে না, ঐ সকল ব্রাউজারে <video> এবং </video> এর মাঝের লেখা প্রদর্শন করবে। একাধিক <source> এলিমেন্টের মাধ্যমে একাধিক ভিডিও ফাইল যুক্ত করতে পারি। ব্রাউজার প্রথমে সাপোর্টেড যে ফর্ম্যাটটি পাবে তাকেই ব্যবহার করবে।


autoplay এট্রিবিউট

স্বয়ংক্রিয়ভাবে একটি ভিডিও চালু করার জন্য autoplay এট্রিবিউট ব্যবহার করা হয়। যে সকল ভিডিও ট্যাগে autoplay এট্রিবিউট ব্যবহার করা হয় সে সকল ভিডিও তে ব্যবহারকারীর কোনো নিয়ন্ত্রন থাকে না। আর ওয়েব পেজ সম্পূর্ণ লোড হওয়ার সাথে সাথে ভিডিওটি স্বয়ংক্রিয়ভাবে চালু হয়ে যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

<video width="320" height="240" autoplay>
  <source src="satt_intro.mp4" type="video/mp4">
  <source src="satt_intro.ogg" type="video/ogg">
  দুঃখিত,আপনার ব্রাউজার ভিডিও ট্যাগ সমর্থণ করে না।
</video>

</body>
</html>

নিম্নের বাটনে ক্লিক করার সাথে সাথে নতুন একটি পেজ লোড হবে এবং autoplay এট্রিবিউটের জন্য ভিডিওটি স্বয়ংক্রিয়ভাবে চালু হয়ে যাবেঃ

ফলাফল




ভিডিও ফর্ম্যাট সাপোর্ট

<video> এলিমেন্টে তিনটি ভিডিও ফর্ম্যাট সাপোর্ট করে। যথাঃ MP4, WebM এবং Ogg । এই তিনটি ফর্ম্যাটের মধ্যে ইন্টারনেট এক্সপ্লোরারসাফারিতে শুধুমাত্র MP4 ফর্ম্যাট সাপোর্ট করে এবং গুগল ক্রোমমজিলা ফায়ারফক্সে তিনটি ফর্ম্যাটই সাপোর্ট করে আর অপেরা ব্রাউজারে তিনটি ফর্ম্যাটই সাপোর্ট করে তবে MP4 ফর্ম্যাটটি ভার্সন ২৫.০ থেকে সাপোর্ট করে।


মিডিয়া টাইপ

তিনটি ফর্ম্যাটের জন্য তিনটি মিডিয়া টাইপ ব্যবহার করতে হয়। MP4 ফর্ম্যাটের জন্য video/mp4, WebM ফর্ম্যাটের জন্য video/webm এবং Ogg ফর্ম্যাটের জন্য video/ogg ব্যবহার করতে হয়।