ویدئوها در HTML به روش های مختلفی می توانند نمایش داده شوند.

پخش ویدئوها در HTML

Wiki

مثال (پخش ویدئو در 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>
خودتان امتحان کنید »

مشکلات و راه حل ها

Wiki

 نمایش ویدئو در HTML ساده نیست! 

باید ترفند های زیادی برای اینکه مطمئن شوید ویدئو شما در تمام مرورگرها (Internet Explorer, Chrome, Firefox, Safari, Opera) و تمامی سخت افزارها (PC, Mac , iPad, iPhone) اجرا شود به کار ببرید.

در این فصل مشکلات و راه حل هایی موجود به طور خلاصه بیان شده است.

پخش ویدئو با استفاده از تگ <embed>

Wiki

هدف از تگ <embed> درج عناصر مولتی مدیا در صفحات HTML می باشد.

قطعه کد HTML زیر یک فایل Flash را در صفحه وب درج می کند:

مثال (پخش ویدئو در HTML)

<embed src="/intro.swf" height="200" width="200"/>
خودتان امتحان کنید »

مشکلات استفاده از تگ <embed>

Wiki

  • تگ <embed> در HTML 4 شناخته شده نیست. صفحه شما دارای اعتبار نمی باشد.
  • اگر مرورگر فرمت فایل شما را پشتیبانی نکند، فایل Flash پخش نخواهد شد.
  • اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.
  • iPad و iPhone نمی توانند فایل های Flash را نمایش دهند.

پخش ویدئو با استفاده از تگ <object> 

Wiki

هدف از تگ <object> درج عناصر مولتی مدیا در صفحات HTML است.

قطعه کد HTML زیر یک فایل Flash را در صفحه وب درج می کند:

مثال (پخش ویدئو در HTML)

<object data="intro.swf" height="200" width="200"/>
خودتان امتحان کنید »

مشکلات استفاده از تگ <object>

Wiki

  • اگر مرورگر فرمت فایل شما را پشتیبانی نکند، فایل Flash پخش نخواهد شد.
  • اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.
  • iPad و iPhone نمی توانند فایل های Flash را نمایش دهند.

پخش ویدئو با استفاده از تگ <video>

Wiki

تگ <video> در HTML5 یک عنصر جدید می باشد.

با استفاده از تگ <video> می توانید فایل های ویدئو را در صفحات HTML پخش کنید.

قطعه کد زیر، با توجه به نوع مرورگر کاربر، یکی از فرمت های ogg، mp4 یا webm را در صفحه وب پخش می کند:

مثال (پخش ویدئو در 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" />
Your browser does not support the video tag.
</video>
خودتان امتحان کنید »

مشکلات استفاده از تگ <video>

Wiki

  • فقط فرمت های Ogg و MP4 و Webm قابل پشتیبانی است و باید یک ویدئو را مانند مثال بالا به چند فرمت تبدیل کنید.
  • عنصر <video> در مرورگرهای قدیمی شناخته شده نیست.
  • عنصر <video> در HTML4 و XHTML معتبر نیست.

بهترین راه حل پخش ویدئو در HTML

Wiki

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">
    Your browser does not support video
    </embed>
  </object>
</video>
خودتان امتحان کنید »

مثال بالا از چهار فرمت متفاوت ویدئویی استفاده می کند. عنصر <video> در HTML 5 سعی به نمایش یکی از ویدئوها، با فرمت های mp4 ،ogg یا webm دارد. اگر نتواند، عنصر <object> را امتحان می کند. اگر این نیز جواب نداد، به عنصر <embed> برگشت داده می شود.

مشکلات

Wiki

  • باید ویدئو ها را به فرمت های زیادی تبدیل کنید.
  • عنصر <video> در HTML 4 و XHTML وجود ندارد.
  • عنصر <embed> در HTML 4 و XHTML اعتبار ندارد.

نکته: استفاده از اعلان <DOCTYPE html!> در بالای صفحه، مشکل اعتبار را حل می کند.

راه حل YouTube

Wiki

راحت ترین روش برای نمایش ویدئو در HTML استفاده از YouTube می باشد.

استفاده از یک Hyperlink

Wiki

اگر صفحه ای شامل یک لینک به یک فایل مدیا باشد، اغلب مرورگرها از یک "نرم افزار کمکی" برای پخش فایل استفاده می کنند.

کد زیر لینکی را به یک فایل Flash نشان می دهد. اگر کاربری روی این لینک کلیک کند، مرورگر برای پخش فایل یک نرم افزار کمکی را فراخوانی می کند: (مثل Windows Media Player)

مثال (پخش ویدئو در HTML)

<a href="/intro.swf">Play a video file</a>
خودتان امتحان کنید »

نکته ای در مورد ویدئوهای Inline

Wiki

هنگامی که ویدئویی در یک صفحه وب قرار داده می شود و یا بخشی از آن صفحه می شود، ویدئوی Inline نامیده می شود.

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

بهترین پیشنهاد ما به شما این است که تنها زمانی از ویدئوهای Inline در صفحات وب استفاده کنید که کاربر، انتظار دیدن ویدئویی را دارد. مثالی از این مورد این است که کاربر برای دیدن ویدئویی روی لینکی کلیک کند و صفحه ای باز شود که شامل آن ویدئو است.

تگ های Multimedia در HTML

Wiki

= جدید در HTML5.

تگ توضیحات
<embed> یک عنصر multimedia را در صفحات HTML درج می کند (در HTML4 شناخته شده نیست)
<object> یک عنصر multimedia را در صفحات HTML درج می کند
<param> یک پارامتر برای object تعریف می کند
<audio> صدا را در صفحات HTML درج می کند
<video> یک ویدئو یا فیلم در صفحات HTML درج می کند
<source> در عناصر <video> و <audio> برای مشخص کردن منبع صدا یا فیلم استفاده می شود.
<track> در عناصر <video> و <audio> برای مشخص کردن متن trackها استفاده می شود.