پخش ویدئو در HTML

چاپ

ویدئوها در 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


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

Wiki

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

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

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

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

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

Wiki


پخش ویدئو با استفاده از تگ <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


بهترین راه حل پخش ویدئو در 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

نکته: استفاده از اعلان <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ها استفاده می شود.