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

ایک اسکریپت کو ویب سائٹ میں داخل کیا گیا ہے جو 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> برچسب‌ها محتوایی که درون‌گذاری می‌شوند را تعریف می‌کنند، مانند نرم‌افزارهای پلاگین.