ویدئو 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 پیج میں میڈیا عناصر کو داخل کرسکے ہیں。

ایک نیچے HTML کوڈ میں فلاش ویڈیو کو داخل کیا گیا ہے:

مثال

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

شما خودتان امتحان کنید

مسئلہ

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

استعمال <object> لبلگ

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

ایک نیچے HTML خمری میں فلاش ویڈیو کو داخل کیا گیا ہے:

مثال

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

شما خودتان امتحان کنید

مسئلہ

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

استعمال <video> لبلگ

HTML5 میں <video> نئی لبلگ ہے。

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

درج ذیل 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) کا استعمال کرکے معائنات کے مسئلے کو حل کریں

یوکو حل

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

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

<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> برچسب‌ها محتوای تعبیه شده را تعریف می‌کنند، مانند افزونه‌ها.