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

برای ریسپاسیو شدن و نمایش به خوبی در تمتمی دستگاه ها از استایل زیر در مجموعه بالا بهره ببرید.

max-width: 100% !important;

مشکلات

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

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