HTML ভিডিও

এইচটিএমএল-তে ভিডিও প্লে করার পদ্ধতি অনেকগুলি রয়েছে

উদাহরণ

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

প্রশ্ন, প্রশ্ন, এবং সমাধান

এইচটিএমএল-তে ভিডিও প্লে করা খুবই সহজ নয়!

আপনাকে অনেক টিকটকস জানা প্রয়োজন, যাতে আপনার ভিডিও ফাইলগুলি সমস্ত ব্রাউজার (ইন্টারনেট এক্সপ্লোরার, চ্রোম, ফায়ারফক্স, স্যাফারি, ওপেরা) এবং সমস্ত হার্ডওয়্যার (পিসিস, ম্যাক, আইপ্যাড, আইফোন) এবং সমস্ত হার্ডওয়্যারে (পিসিস, ম্যাক, আইপ্যাড, আইফোন) প্লে করা যায়

এই চাপ্তির মধ্যে, CodeW3C.com প্রশ্ন এবং সমাধানমূলক পদ্ধতি সামগ্রী প্রদান করেছে

<embed> ট্যাগ ব্যবহার করুন

<embed> ট্যাগের কাজ হল এইচটিএমএল পাতায় মাল্টিমিডিয়া ইলিমেন্ট এম্বেড করা

নিচের এইচটিএমএল কোডটি ওয়েবসাইটে এম্বেডড ফ্ল্যাশ ভিডিওকে দেখায়:

উদাহরণ

<embed src="movie.swf" height="200" width="200"/>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

সমস্যা

  • এইচটিএমএল ৪ <embed> ট্যাগটি পরিচিত করতে পারে না। আপনার পাতা নিশ্চিত করা যাবে না
  • যদি ব্রাউজার ফ্ল্যাশকে সমর্থন করতে পারে না, তবে ভিডিও প্লে করা যাবে না
  • আইপ্যাড এবং আইফোন ফ্ল্যাশ ভিডিওকে দেখা যাবে না
  • আপনি যদি ভিডিওকে অন্য ফরম্যাটে রূপান্তরিত করেন, তবেও সমস্ত ব্রাউজারে তা প্লে করা যাবে না

<object> ট্যাগ ব্যবহার করুন

<object> ট্যাগের কাজ হল এইচটিএমএল পাতায় মাল্টিমিডিয়া ইলিমেন্ট এম্বেড করা

নিচের এইচটিএমএল ফ্রেমটি ওয়েবসাইটে এম্বেডড ফ্ল্যাশ ভিডিওকে দেখায়:

উদাহরণ

<object data="movie.swf" height="200" width="200"/>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

সমস্যা

  • যদি ব্রাউজার ফ্ল্যাশকে সমর্থন করতে পারে না, তবে ভিডিও প্লে করা যাবে না
  • আইপ্যাড এবং আইফোন ফ্ল্যাশ ভিডিওকে দেখা যাবে না
  • আপনি যদি ভিডিওকে অন্য ফরম্যাটে রূপান্তরিত করেন, তবেও সমস্ত ব্রাউজারে তা প্লে করা যাবে না

ভিডিও> ট্যাগ ব্যবহার করুন

ভিডিও> এটি এইচটিএমএল ৫-র একটি নতুন ট্যাগ

<video> ট্যাগের কাজ হল একটি ভিডিও ইলেকট্রন হাইপারটেক্স্ট মাল্টিমিডিয়া সম্প্রসারণকে HTML পেজে এম্বেড করা।

নিম্নোক্ত HTML স্ক্রিপ্টটি ওয়েবসাইটে এম্বেড করা ogg, mp4 বা webm ফরম্যাটের ভিডিও প্রদর্শন করবে:

উদাহরণ

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
আপনার ব্রাউজার ভিডিও ট্যাগটি সমর্থন করে না。
</video>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

সমস্যা

  • আপনাকে ভিডিওকে অনেকগুলি ভিন্ন ফরম্যাটে রূপান্তরিত করতে হবে
  • <video> ইলেকট্রন হাইপারটেক্স্ট মাল্টিমিডিয়া সম্প্রসারণটি পুরাতন ব্রাউজারে কার্যকর নয়。
  • <video> ইলেকট্রন হাইপারটেক্স্ট মাল্টিমিডিয়া সম্প্রসারণটি HTML 4 এবং XHTML যাচাইয়ের মাধ্যমে পারে না。

সবচেয়ে ভালো HTML সমাধান

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

এই উদাহরণে 4টি ভিন্ন ভিডিও ফরম্যাট ব্যবহার করা হয়েছে।HTML 5 <video> ইলেকট্রন হাইপারটেক্স্ট মাল্টিমিডিয়া সম্প্রসারণটি mp4, ogg বা webm ফরম্যাটের একটি দিয়ে ভিডিও প্লেয়ার করার চেষ্টা করবে।যদি এগুলি সকলই ব্যর্থ হয়, তবে <embed> ইলেকট্রন হাইপারটেক্স্ট মাল্টিমিডিয়া সম্প্রসারণকে অবতর্কিত করবে。

সমস্যা

  • আপনাকে ভিডিওকে অনেকগুলি ভিন্ন ফরম্যাটে রূপান্তরিত করতে হবে
  • <video> ইলেকট্রন হাইপারটেক্স্ট মাল্টিমিডিয়া সম্প্রসারণটি HTML 4 এবং XHTML যাচাইয়ের মাধ্যমে পারে না。
  • <embed> ইলেকট্রন হাইপারটেক্স্ট মাল্টিমিডিয়া সম্প্রসারণটি HTML 4 এবং XHTML যাচাইয়ের মাধ্যমে পারে না。

মন্তব্য:<!DOCTYPE html> (HTML5) এর মাধ্যমে যাচাই সমস্যা সমাধান করুন。

উইকু সমাধান

ওয়েবসাইটে ভিডিও প্রদর্শনের সবচেয়ে সহজভাবে উইকু এবং অন্যান্য ভিডিও ওয়েবসাইট ব্যবহার করা হয়。

আপনি যদি ভিডিও প্লেয়ারের মাধ্যমে ওয়েবসাইটে ভিডিও প্লেয়ার করতে চান, তবে আপনাকে ভিডিওটি উইকু এবং অন্যান্য ভিডিও ওয়েবসাইটে আপলোড করতে হবে, এবং তারপর আপনার ওয়েবসাইটে HTML কোডটি ইনসার্ট করতে হবে এবং তারপর ভিডিও প্লেয়ার করা হবে:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

সুপারলিঙ্ক ব্যবহার

যদি ওয়েবপেজটিতে মিডিয়া ফাইলের লিঙ্ক থাকে, তবে অধিকাংশ ব্রাউজার 'সহযোগী অ্যাপ্লিকেশন' ব্যবহার করে ফাইল প্লে করবে。

নিম্নলিখিত কোড শব্দকক্ষটি AVI ফাইলের লিঙ্ক প্রদর্শন করে। যদি ব্যবহারকারী এই লিঙ্কটি ক্লিক করেন, তবে ব্রাউজার একটি 'সহযোগী অ্যাপ্লিকেশন', যেমন Windows Media Player, ব্যবহার করে এই AVI ফাইল প্লে করবে:

উদাহরণ

<a href="movie.swf">Play a video file</a>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ইনলাইন ভিডিও সম্পর্কে একটি মন্তব্য

যখন ভিডিও ওয়েবপেজে অন্তর্ভুক্ত হয়, তখন তা ইনলাইন ভিডিও হিসাবে পরিচিত

আপনি যদি ইনলাইন ভিডিওকে ওয়েব অ্যাপ্লিকেশনে ব্যবহার করতে চান, তবে আপনাকে মনে রাখতে হবে যে, অনেকেই ইনলাইন ভিডিওকে নারাজক বলে মনে করেন。

একইসঙ্গে, মনে করুন যে, ব্যবহারকারী ব্রাউজারের মধ্যে ইনলাইন ভিডিও বিকল্পটি বন্ধ করতে পারেন。

আমাদের সর্বোত্তম পরামর্শ হল, কেবল যখন ব্যবহারকারী ইনলাইন ভিডিও দেখতে চায়, তখন তাদের জন্য ইনলাইন ভিডিও অন্তর্ভুক্ত করুন। একটি ইতিবাচক উদাহরণ হল, যখন ব্যবহারকারী একটি ভিডিও দেখতে চায় এবং কোনও লিঙ্ক ক্লিক করে, তখন পৃষ্ঠা খুলে এবং ভিডিও প্লে করা হয়。

HTML 4.01 মাল্টিমিডিয়া ট্যাগ

ট্যাগ ডিসক্রিপশন
<applet> অনুমোদিত নাএম্বেডেড applet ডিফাইন
<embed> অনুমোদিত নাএম্বেডেড অবজেক্ট ডিফাইন (HTML5-এ অনুমোদিত)
<object> এম্বেডেড অবজেক্ট ডিফাইন
<param> অবজেক্টের পারামিটার ডিফাইন

HTML 5 মাল্টিমিডিয়া ট্যাগ

ট্যাগ ডিসক্রিপশন
<video> ট্যাগ ডিফাইনস সাউন্ড, যেমন সঙ্গীত বা অন্যান্য অডিও স্ট্রিম।
<embed> ট্যাগ ডিফাইনস এম্বেডেড কনটেন্ট, যেমন প্লাগইন।