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

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">

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。

以下代码片显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player 来播放这个 AVI 文件：

ਉਦਾਹਰਣ

<a href="movie.swf">Play a video file</a>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਵੀਡੀਓ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਬਾਰੇ ਇੱਕ ਟਿੱਪ

ਜਦੋਂ ਵੀਡੀਓ ਵੈੱਬ ਪੰਨੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਉਹ ਵੀਡੀਓ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

ਜੇਕਰ ਤੁਸੀਂ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵੀਡੀਓ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ, ਤੁਸੀਂ ਇਹ ਧਿਆਨ ਰੱਖਣਾ ਹੈ ਕਿ ਬਹੁਤ ਸਾਰੇ ਲੋਕ ਵੀਡੀਓ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਨੂੰ ਬੇਸਬਰੇ ਮੰਨਦੇ ਹਨ。

ਇਸ ਦੇ ਨਾਲ ਸਾਥੀ ਵੀ ਧਿਆਨ ਰੱਖੋ ਕਿ ਉਸਰੇ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਵੀਡੀਓ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਵਿਕਲਪਿਕ ਚੋਣ ਕੀਤੀ ਗਈ ਹੈ。

ਸਭ ਤੋਂ ਚੰਗੀ ਸਲਾਹ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਉਹਨਾਂ ਸਥਾਨਾਂ ਵਿੱਚ ਵੀਡੀਓ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ ਜਿੱਥੇ ਉਸ ਨੂੰ ਦਿਸਣਾ ਹੈ ਕਿਉਂਕਿ ਉਸ ਨੂੰ ਕਿਸੇ ਲਿੰਕ ਉੱਤੇ ਕਲਿੱਕ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਅਤੇ ਪੰਨਾ ਖੁੱਲ੍ਹਦਾ ਹੈ ਅਤੇ ਵੀਡੀਓ ਚਲਾਉਂਦਾ ਹੈ。

HTML 4.01 ਮੀਡੀਆ ਟੈਗ

ਟੈਗ ਵਰਣਨ
<applet> ਅਪ੍ਰਸ਼ੰਸਾਯੋਗਅੰਦਰੂਨੀ applet ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。
<embed> ਅਪ੍ਰਸ਼ੰਸਾਯੋਗਅੰਦਰੂਨੀ ਆਬਜੈਕਟ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ (HTML5 ਵਿੱਚ ਮਨਜ਼ੂਰ ਹੈ)。
<object> ਅੰਦਰੂਨੀ ਆਬਜੈਕਟ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。
<param> ਆਬਜੈਕਟ ਦੇ ਪੈਰਾਮੀਟਰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

HTML 5 ਮੀਡੀਆ ਟੈਗ

ਟੈਗ ਵਰਣਨ
<video> ਟੈਗ ਦੁਆਰਾ ਸੰਗੀਤ ਜਾਂ ਹੋਰ ਆਡੀਓ ਸਟ੍ਰੀਮ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。
<embed> ਟੈਗ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਸਮਾਚਾਰ, ਜਿਵੇਂ ਕਿ ਪਲੈਗਇਨ ਹੈ。