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