ویدئو HTML

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>

یک بار امتحان کنید

مسئلے، مسئلے، اور حل

HTML میں ویڈیو پلے کرنا آسان نہیں!

آپ کو بہت سے حصصوں کو معروف رکھنا چاہئیے، تاکہ آپ کا ویڈیو فائل تمام براوزر (اینٹرنٹ اکریئر، کروم، فائر فاکس، سافری، اوپرا) اور تمام ہارڈوئئر (پ سی، ماک، آی پید، آی فون) میں پلے سکے

اس باب میں، CodeW3C.com آپ کو مسئلے اور حل کا خلاصہ فراہم کرتا ہے

تگ <embed> استعمال کریں

تگ <embed> کا کام، ویب پیج میں میڈیا عنصر کو داخل کرنا ہے

ایک نیچل HTML کوڈ، جو ویب سائٹ میں داخل شدہ Flash ویڈیو کو دکھاتا ہے:

مثال

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

یک بار امتحان کنید

مسئلہ

  • HTML4 تگ <embed> کو نہیں پہچان سکتا، آپ کا پیج تصدیق نہیں کیا جاسکتا
  • اگر براوزر Flash نہیں سپورٹ کرتا تو ویڈیو نہیں پلے سکتا
  • iPad اور iPhone کو Flash ویڈیو نہیں دکھائیں سکتا
  • اگر آپ ویڈیو کو دوسرے فارمٹ میں تبدیل کریں تو وہ تمام براوزر میں نہیں پلے سکتا ہے

تگ <object> استعمال کریں

تگ <object> کا کام، ویب پیج میں میڈیا عنصر کو داخل کرنا ہے

ایک نیچل HTML پاراگراف، جو ویب سائٹ میں داخل شدہ Flash ویڈیو کو دکھاتا ہے:

مثال

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

یک بار امتحان کنید

مسئلہ

  • اگر براوزر Flash نہیں سپورٹ کرتا تو ویڈیو نہیں پلے سکتا
  • iPad اور iPhone کو Flash ویڈیو نہیں دکھائیں سکتا
  • اگر آپ ویڈیو کو دوسرے فارمٹ میں تبدیل کریں تو وہ تمام براوزر میں نہیں پلے سکتا ہے

تگ <video> استعمال کریں

HTML5 میں <video> ایک نئی تگ ہے۔

<video> تگ کا کام یہ ہے کہ وہ ویب پیج میں ویڈیو علامت کو داخل کرسکے

ایچ تی ایم ایل تیسرا حصہ، یہ ویب سائٹ میں داخل کیا گیا ہے:

مثال

<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> علامت ایچ تی ایم ایل 4 اور ایچ تی ایچ ایم اور ان کی توثیق نہیں کرسکتا

بہترین 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 مختلف ویڈیو فارمات استعمال کئے گئے ہیں۔ ایچ تی ایم ایل 5 <video> علامت ویڈیو کو mp4،ogg یا webm فارمات میں کسی سے بھی پلے کریگا۔ اگر سارے فارمات میں کامیابی نہیں ہوئی تو <embed> علامت کا استعمال کیا جائے گا

مسئلہ

  • آپ کو ویڈیو کو متعدد مختلف فارمات میں تبدیل کرنا پڑتا ہے
  • <video> علامت ایچ تی ایم ایل 4 اور ایچ تی ایچ ایم اور ان کی توثیق نہیں کرسکتا
  • <embed> علامت ایچ تی ایم ایل 4 اور ایچ تی ایچ ایم اور ان کی توثیق نہیں کرسکتا

نوٹ:<!DOCTYPE html> (HTML5) کا استعمال کرکے تلاش کی مشکل کو حل کریں

یوکو حل

ایچ تی ایم ایل میں ویڈیو دکھانے کا سادارا طریقہ یوکو جیسے ویب سائٹوں کا استعمال کرنا ہے。

اگر آپ چاہتاں کہ آپ کی ویب سائٹ پر ویڈیو اُس پلے کریں تو آپ کرسکتا ہیں کہ ویڈیو کو یوکو جیسے ویڈیو ویب سائٹ پر اپ لوڈ کریں اور اپنی ویب سائٹ میں ایچ تی ایم ایل کو داخل کریں تاکہ ویڈیو اُس پلے کرسکتا ہو:

<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">ویدیو فایل پخش کنید</a>

یک بار امتحان کنید

یک توضیح درباره ویدیوهای درون‌صفحه نمایش

وقتی ویدیو در صفحه وب قرار می‌گیرد، به آن ویدیو درون‌صفحه نمایش می‌گویند.

اگر قصد دارید ویدیوهای درون‌صفحه نمایش را در برنامه وب خود استفاده کنید، باید بدانید که بسیاری از افراد ویدیوهای درون‌صفحه نمایش را آزاردهنده می‌دانند.

همچنین توجه داشته باشید که ممکن است کاربران گزینه‌های ویدیوهای درون‌صفحه نمایش را در مرورگر خود غیرفعال کرده باشند.

بهترین توصیه ما این است که فقط در مکان‌هایی که کاربر می‌خواهد ویدیو‌های درون‌صفحه نمایش را ببینید، آن‌ها را شامل شوید. یک مثال مثبت این است که، زمانی که کاربر نیاز دارد ویدیویی را ببیند و روی یک لینک کلیک کند، صفحه‌ای باز می‌شود و ویدیو پخش می‌شود.

برچسب‌های چندرسانه‌ای HTML 4.01

برچسب توضیح
<applet> منسوخ شده است.applet درونی را تعریف می‌کند.
<embed> منسوخ شده است.شیء درونی را تعریف می‌کند. (در HTML5 مجاز است)
<object> شیء درونی را تعریف می‌کند.
<param> پارامترهای شیء را تعریف می‌کند.

برچسب‌های چندرسانه‌ای HTML 5

برچسب توضیح
<video> برچسب‌ها صدای را تعریف می‌کنند، مانند موسیقی یا جریان‌های صوتی دیگر.
<embed> برچسب‌ها محتوای پیوندی را تعریف می‌کنند، مانند افزونه‌ها.