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

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

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

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

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

এইচটিএমএল৫

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

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

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

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

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

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

রেফারেন্স- reference

 

এইচটিএমএল ইউটিউব ভিডিও


এইচটিএমএলে পেজে ভিডিও চালু করার জন্য সবচেয়ে সহজ পদ্ধতি হলো ইউটিউব ব্যবহার করা। একটি ওয়েব পৃষ্ঠায় একটি ভিডিও এম্বেড করা কাটিং এবং পেস্টিং এর মতই সহজ কাজ। ইউটিউব থেকে আপনার সাইটে আপনার একটি ভিডিও যোগ করার জন্য কত খরচ হয়? উত্তর - কিছুই নেই। বরং ইউটিউব অতিরিক্ত পরিষেবা এবং তাদের ব্যান্ডউইথও সরবরাহ করে।


ভিডিও ফর্ম্যাট নিয়ে ঝামেলা?

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


ইউটিউব ভিডিও আইডি

যখন আপনি ইউটিউবে ভিডিও চালু করেন বা সংরক্ষন করেন, তখন ইউটিউব একটি আইডি(যেমনঃ bNRpnd4qWfc) ইউটিউবের লিংকের পরে প্রদর্শন করে। আপনি এই আইডি ব্যবহার করে আপনার এইচটিএমএল কোডে ভিডিওটি সুপারিশ(refer) করতে পারেন।


এইচটিএমএলে ইউটিউব ভিডিও

আপনার ওয়েবপেজে ইউটিউব ভিডিও চালানোর জন্য, নিচের কাজগুলো করতে হবেঃ

  • ইউটিউবে ভিডিও আপলোড করুন।
  • ভিডিওর আইডি টি নোট করুন।
  • আপনার ওয়েব পেজে একটি <iframe> এলিমেন্ট নির্ধারণ করুন।
  • src এট্রিবিউটে ভিডিওর URL নির্ধারণ করুন।
  • ভিডিওটি চালানোর জন্য আয়তন নির্দিষ্ট করতে width এবং height এট্রিবিউট ব্যবহার করুন।
  • নিম্নের মত URL-এ অন্যান্য প্যারামিটার গুলো সঠিক ভাবে যুক্ত করুন।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ইউটিউব ভিডিও </title>
</head>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/bNRpnd4qWfc"></iframe>

</body>
</html>

ফলাফল




ইউটিউব অটোপ্লে

একজন ব্যবহারকারী যখন আপনার পেজে ভিজিট করবে তখন ভিডিও স্বয়ংক্রিভাবে চালু করার জন্য শুধুমাত্র ইউটিউব URL-এ একটি প্যারামিটার যুক্ত করুন।

Autoplay এট্রিবিউটের ভ্যালু সমুহঃ

ভ্যালু বর্ণনা
0 (ডিফল্ট) যখন প্লেয়ার লোড হবে তখন ভিডিওটি স্বয়ংক্রিয়ভাবে চালু হবে না।
1 প্লেয়ার লোড হওয়ার সাথে সাথে ভিডিওটি স্বয়ংক্রিয়ভাবে চালু হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ইউটিউব ভিডিও autoplay </title>
</head>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/bNRpnd4qWfc?autoplay=1"></iframe>

</body>
</html>

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

ফলাফল



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


ইউটিউব - প্লে-লিস্ট লুপ

আপনি একই পদ্ধতিতে ইউটিউবের প্লে-লিস্ট এম্বেড করতে পারেন। আর একটি ভিডিও কতবার চলবে তা নির্ধারণ করার জন্য loop এট্রিবিউট ব্যবহার করতে হবেঃ

loop এট্রিবিউটের ভ্যালু সমুহঃ

ভ্যালু বর্ণনা
0 (ডিফল্ট) ভিডিওটি শুধুমাত্র একবার চলবে।
1 ভিডিও লুপ হবে অর্থাৎ ভিডিওটি চলতেই থাকবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ইউটিউব প্লে-লিস্ট</title>
</head>
<body>

<iframe width="100%" height="345" src="https://www.youtube.com/embed/videoseries?list=PLAIfaQGwmI0w_CP2KaKwwKcN3Qbpl3vUF&loop=1">
</iframe>

</body>
</html>

ফলাফল




ইউটিউব নিয়ন্ত্রণ প্যানেল

ভিডিও নিয়ন্ত্রন করতে এটি ব্যবহৃত হয়। আর এই প্যানেলটিকে নিয়ন্ত্রন করতে controls এট্রিবিউট ব্যবহার করা হয়।

controls এট্রিবিউটের ভ্যালু সমুহঃ

ভ্যালু বর্ণনা
1 (ডিফল্ট) ভিডিওর প্লেয়ার নিয়ন্ত্রণ প্যানেল প্রদর্শন করে।
0 ভিডিওর প্লেয়ার নিয়ন্ত্রণ প্যানেল প্রদর্শন করে না।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ইউটিউব ভিডিও নিয়ন্ত্রণ প্যানেল</title>
</head>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/bNRpnd4qWfc?controls=0"></iframe>

</body>
</html>

ফলাফল




ইউটিউব - <object> অথবা <embed> এলিমেন্টের ব্যবহার

আপনি <object> এবং <embed> ট্যাগ ব্যবহার করে আপনার ওয়েব পেজে ইউটিউব ভিডিও প্লে করতে পারবেন তবে ইউটিউব জানুয়ারী ২০১৫ থেকে এই দুইটি ট্যাগের ব্যবহার ডেপ্রিসিয়েটেড(deprecated) ঘোষনা করেছে। আপনি ইউটিউব ভিডিও আপনার ওয়েব পেজে যুক্ত করতে এই দুইটি ট্যাগের পরিবর্তে <iframe> ব্যবহার করুন।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ইউটিউব ভিডিওতে object এবং embed এলিমেন্টের ব্যবহার</title>
</head>
<body>

<object width="420" height="345"
data="https://www.youtube.com/embed/bNRpnd4qWfc">
</object>

<embed width="420" height="345"
src="https://www.youtube.com/embed/bNRpnd4qWfc">

</body>
</html>