ایچ تی ایم ال ویڈیو

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 ਵਿੱਚ ਵੀਡੀਓ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਅਸਾਨ ਨਹੀਂ ਹੈ!

ਤੁਹਾਨੂੰ ਬਹੁਤ ਸਾਰੀਆਂ ਕੌਸ਼ਲ ਪ੍ਰਾਪਤ ਕਰਨੀਆਂ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ ਤਾਂ ਕਿ ਤੁਹਾਡੇ ਵੀਡੀਓ ਫਾਈਲ ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ (ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ, ਚਾਰੋਮ, ਫਾਇਰਫਾਕਸ, ਸਫਾਰੀ, ਓਪੇਰਾ) ਅਤੇ ਸਾਰੇ ਹਾਰਡਵੇਅਰ (PC, Mac, iPad, iPhone) 'ਤੇ ਚਲ ਸਕਣ।

ਇਸ ਚਾਪ ਵਿੱਚ، CodeW3C.com ਨੇ ਸਵਾਲਾਂ ਅਤੇ ਹੱਲਾਂ ਦੀ ਸੰਗ੍ਰਹਿ ਕੀਤੀ ਹੈ。

<embed> ਟੈਗ ਦੀ ਵਰਤੋਂ

<embed> ਟੈਗ ਦੀ ਵਰਤੋਂ ਹੈ ਕਿ HTML ਪੇਜ ਵਿੱਚ ਮਲਟੀਮੀਡੀਆ ਅਂਬੰਧੀ ਐਲੀਮੈਂਟ ਵਿੱਚ ਜੋੜਨ ਲਈ。

ਹੇਠ ਲਿਖੇ HTML ਕੋਡ ਵਿੱਚ ਵੈਬਸਾਈਟ ਵਿੱਚ ਇੰਕਰਪੋਰੇਟ ਕੀਤੇ ਗਏ Flash ਵੀਡੀਓ ਦਿਸਾਈਟ ਹੈ:

مثال

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

آپ خود کا تجربہ کریں

ਮੁੱਦਾ

  • HTML4 <embed> ਟੈਗ ਨੂੰ ਪਛਾਣ ਨਹੀਂ ਸਕਦਾ। ਤੁਹਾਡਾ ਪੇਜ ਨਹੀਂ ਪ੍ਰਮਾਣਿਤ ਹੋ ਸਕਦਾ
  • ਅਗਰ ਬਰਾਉਜ਼ਰ Flash ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਤਾਂ ਵੀਡੀਓ ਚਲੇ ਨਹੀਂ ਸਕਦਾ
  • iPad ਅਤੇ iPhone ਨੂੰ Flash ਵੀਡੀਓ ਨਹੀਂ ਦਿਖਾਉਂਦੇ ਹਨ。
  • ਅਗਰ ਤੁਸੀਂ ਵੀਡੀਓ ਨੂੰ ਹੋਰ ਫਾਰਮੈਟ ਵਿੱਚ ਬਦਲ ਦੇਵੋ ਤਾਂ ਵੀ ਇਹ ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਚਲੇ ਨਹੀਂ ਸਕਦੇ。

<object> ਟੈਗ ਦੀ ਵਰਤੋਂ

<object> ਟੈਗ ਦੀ ਵਰਤੋਂ ਹੈ ਕਿ HTML ਪੇਜ ਵਿੱਚ ਮਲਟੀਮੀਡੀਆ ਅਂਬੰਧੀ ਐਲੀਮੈਂਟ ਵਿੱਚ ਜੋੜਨ ਲਈ。

ਹੇਠ ਲਿਖੇ HTML ਸ਼ੈਕਟਕਸ ਵਿੱਚ ਵੈਬਸਾਈਟ ਵਿੱਚ ਇੰਕਰਪੋਰੇਟ ਕੀਤੇ ਗਏ Flash ਵੀਡੀਓ ਦਿਸਾਈਟ ਹੈ:

مثال

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

آپ خود کا تجربہ کریں

ਮੁੱਦਾ

  • ਅਗਰ ਬਰਾਉਜ਼ਰ Flash ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਤਾਂ ਵੀਡੀਓ ਚਲੇ ਨਹੀਂ ਸਕਦਾ。
  • iPad ਅਤੇ iPhone ਨੂੰ Flash ਵੀਡੀਓ ਨਹੀਂ ਦਿਖਾਉਂਦੇ ਹਨ。
  • ਅਗਰ ਤੁਸੀਂ ਵੀਡੀਓ ਨੂੰ ਹੋਰ ਫਾਰਮੈਟ ਵਿੱਚ ਬਦਲ ਦੇਵੋ ਤਾਂ ਵੀ ਇਹ ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਚਲੇ ਨਹੀਂ ਸਕਦੇ。

video> ਟੈਗ ਦੀ ਵਰਤੋਂ

video> ਹੈ HTML 5 ਵਿੱਚ ਨਵੀਂ ਟੈਗ.

<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> ਐਲੀਮੈਂਟ ਐੱਚਟੀਐੱਮਐੱਲ 4 ਅਤੇ XHTML ਤਸਦੀਕ ਨਹੀਂ ਪਾ ਸਕਦਾ ਹੈ。

ਬਿਹਤਰੀਨ ਐੱਚਟੀਐੱਮਐੱਲ ਸਲਿਊਸ਼ਨ

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> ਐਲੀਮੈਂਟ ਐੱਚਟੀਐੱਮਐੱਲ 4 ਅਤੇ XHTML ਤਸਦੀਕ ਨਹੀਂ ਪਾ ਸਕਦਾ ਹੈ。
  • <embed> ਐਲੀਮੈਂਟ ਐੱਚਟੀਐੱਮਐੱਲ 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 فائل کو نکالتا ہے اگر یوزر لنک پر کلک کرتا ہے تو، بروزر 'سپلائر ایپلی کیشن'، مثلاً ویندوز میڈیا پلیر کا استعمال کرتا ہے تاکہ AVI فائل کو پلائی کر سکے:

مثال

<a href="movie.swf">پلائی ویدئو فائل</a>

آپ خود کا تجربہ کریں

ان لائن ویدئو کا بارہم

جب ویدئو ویب پیج میں داخل کیا جاتا ہے تو، وہ ان لائن ویدئو کہلاتا ہے。

اگر آپ وہائبر ویب ایپلی کیشن میں ان لائن ویدئو کا استعمال کرنا چاہتے ہیں تو، آپ کو معلوم کرنا چاہئے کہ کثیر تعداد میں لوگ ان لائن ویدئو کو بے چارہ سمجھتے ہیں۔

ساتھ میں یاد رکھیں کہ یوزر اس بروزر میں ان لائن ویدئو کا انتخاب کرسکتا ہے

ہماری بہترین تجویز یہ ہے کہ صرف جب یوزر چاہتا ہے کہ وہ ان لائن ویدئو کو دیکھ سکے، تو ان لائن ویدئو کو شامل کریں۔ ایک مثال یہ ہے کہ جب یوزر کو ویدئو دیکھنا چاہئے اور کسی لنک پر کلک کرنا چاہئے تو، وہ پیج کا وژن کیا جائے اور ویدئو شروع ہو جائے۔

HTML 4.01 میڈیا بلگ

بلگ ترجیح
<applet> منسوخ کیا گیا ہے。داخل کئے گئے اپلیٹ کا تعریف کرتا ہے。
<embed> منسوخ کیا گیا ہے。داخل کئے گئے عنصر کا تعریف کرتا ہے (HTML5 میں مجاز ہے)
<object> داخل کئے گئے عنصر کا تعریف کرتا ہے。
<param> عنصر کے پارامتر کا تعریف کرتا ہے。

HTML 5 میڈیا بلگ

بلگ ترجیح
<video> بلگ، جیسا کہ موسیقی یا دیگر آؤڈیو سٹریما، داخل کئے جاتے ہیں。
<embed> بلگ، جیسا کہ پرگام، بغیر کسی نیوکریوک کی جگہ داخل کئے جاتے ہیں。