ویدئو 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> HTML5 سعی می‌کنند ویدیو را با یکی از فرمت‌های 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> برچسب‌ها محتوای داخلی‌ای مانند افزونه‌ها را تعریف می‌کنند.