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

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

ਇਸ ਚਾਪ ਵਿੱਚ CodeW3C.com ਨੇ ਤੁਹਾਨੂੰ ਸਮੱਸਿਆਵਾਂ ਅਤੇ ਹੱਲਾਂ ਦੀ ਸੰਖਿਆ ਕੀਤੀ ਹੈ।

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

<embed> ਟੈਗ ਦੀ ਵਰਤੋਂ ਹੈ ਕਿ ਹੈਂਡਲ ਵਿੱਚ ਮਲਟੀਮੀਡੀਆ ਐਲੀਮੈਂਟ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ।

ਹੇਠ ਵਿੱਚ ਵੈਬਸਾਈਟ ਵਿੱਚ ਸ਼ਾਮਲ ਫਲੈਸ਼ ਵੀਡੀਓ ਦਿਖਾਉਣ ਵਾਲਾ HTML ਕੋਡ:

مثال

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

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

ਮੁੱਦਾ

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

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

<object> ਟੈਗ ਦੀ ਵਰਤੋਂ ਹੈ ਕਿ ਹੈਂਡਲ ਵਿੱਚ ਮਲਟੀਮੀਡੀਆ ਐਲੀਮੈਂਟ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ।

ਹੇਠ ਵਿੱਚ ਵੈਬਸਾਈਟ ਵਿੱਚ ਸ਼ਾਮਲ ਫਲੈਸ਼ ਵੀਡੀਓ ਦਿਖਾਉਣ ਵਾਲਾ 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) ਦੀ ਮਦਦ ਨਾਲ ਤਸਦੀਕ ਮੁੱਦੇ ਨੂੰ ਹੱਲ ਕਰੋ。

ਯੂਕੂ ਸਲਿਊਸ਼ਨ

HTML ਵਿੱਚ ਵੀਡੀਓ ਪਲੇਅ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਸਰਲ ਤਰੀਕਾ ਯੂਕੂ ਜਿਹੇ ਵੀਡੀਓ ਵੈੱਬਸਾਈਟ ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਹੈ。

ਅਗਰ ਤੁਸੀਂ ਵੈੱਬਸਾਈਟ 'ਤੇ ਵੀਡੀਓ ਪਲੇਅ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਵੀਡੀਓ ਨੂੰ ਯੂਕੂ ਜਿਹੇ ਵੀਡੀਓ ਵੈੱਬਸਾਈਟ 'ਤੇ ਅੱਪਲੋਡ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ 'ਚ 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">پخش فایل ویدیویی</a>

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

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

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

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

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

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

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

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

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

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