ویدئو 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 آسان نیست!

شما باید با تعداد زیادی تکنیک آشنا باشید تا مطمئن شوید که فایل‌های ویدیوی شما در همه مرورگرها (Internet Explorer, Chrome, Firefox, Safari, Opera) و همه سخت‌افزارها (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> یکی از برچسب‌های جدید HTML5 است.

نقش علامت <video> در جاگذاری عنصر ویدیو در صفحه HTML است.

بخش 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 فرمت ویدیویی مختلف استفاده شده است. عنصر <video> HTML 5 سعی می‌کند ویدیو را با استفاده از یکی از فرمت‌های mp4، ogg یا webm پخش کند. اگر همه این‌ها شکست بخورند، به عنصر <embed> بازمی‌گردد.

مشکل

  • شما باید ویدیو را به فرمت‌های مختلفی تبدیل کنید
  • عنصر <video> نمی‌تواند از طریق HTML 4 و XHTML تأیید شود.
  • عنصر <embed> نمی‌تواند از طریق HTML 4 و XHTML تأیید شود.

توضیح:برای حل مشکلات تأیید، از <!DOCTYPE html> (HTML5) استفاده کنید.

راه‌حل Youku

یکی از ساده‌ترین روش‌ها برای نمایش ویدیو در HTML استفاده از وب‌سایت‌های ویدیویی مانند Youku است.

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