تگ video در HTML

در این مقاله با تگ video در HTML آشنا می شوید.

نکات اصلی تگ video در HTML

• با استفاده از تگ <video> می توانید HTML را وارد صفحه ویدئو کنید.
• این تگ در HTML5 معرفی شد.
• از ویژگی های جهانی پشتیبانی می کند.

استفاده از تگ video

تگ video در HTML شامل یک ویدیو در صفحه وب است. به روشی مشابه تگ <object> کار می کند:

<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  <source src="video-tag-sample.webm" type="video/webm">
  <source src="video-tag-demo.ogg" type="video/ogg">
  Video tag is not supported in this browser.
</video>

این تگ با انواع فایل MP4 ، WebM و Ogg سازگار است. برای جلوگیری از کدک های ویدئویی و مشکلات سازگاری مرورگر ، بهتر است چندین منبع به فیلم اضافه کنید.

استفاده از تگ های HTML ویدئویی باز و بسته کننده اجباری است. اگر مرورگر نتواند ویدئو را نشان دهد ، متنی را که بین آن ها می نویسید نمایش می دهد.

ویژگی های تگ video که بیشتر مورد استفاده قرار می گیرند

autoplay مشخص می کند که آیا ویدیو هنگام آماده شدن باید به طور خودکار پخش شود:

<video controls autoplay width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  Video tag is not supported in this browser.
</video>

توجه: برای جلوگیری از پخش خودکار فیلم ، ویژگی را به کلی حذف کنید. به سادگی تغییر مقدار آن به false کمک نمی کند.

controls مشخص می کند که آیا فیلم باید دارای دکمه های کنترل کننده پخش کننده باشد (پخش ، مکث ، میزان صدا و غیره):

<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  Video tag is not supported in this browser.
</video>

height و width ابعاد پخش کننده ویدیو را تعریف می کند:

<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  Video tag is not supported in this browser.
</video>

loop مشخص می کند که آیا ویدیو پس از پایان از ابتدا شروع می شود یا خیر:

<video controls loop width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  Video tag is not supported in this browser.
</video>

muted مشخص می کند که آیا صوتی ویدیو هنگام بارگیری باید قطع شود:

<video controls muted width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  Video tag is not supported in this browser.
</video>

poster مشخص می کند که آیا هنگام بارگیری فیلم ، تصویر خاصی نشان داده می شود یا خیر:

<video controls poster="/images/video-tag.gif" width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  Video tag is not supported in this browser.
</video>

preload نحوه بارگذاری یک فیلم هنگام بارگیری صفحه را مشخص می کند:

<video controls preload="none" width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  Video tag is not supported in this browser.
</video>

توجه: سه مقدار پیش بار احتمالی وجود دارد: هیچکدام (بدون پیش بارگیری) ، فراداده (فقط پیش فرض ها را بارگیری می کند) و خودکار (کل پرونده از قبل بارگیری می شود).

src منبع URL فایل ویدیویی را تعریف می کند:

<video src="video-tag-example.mp4" controls width="400" height="300">
  <track kind="subtitles" src="video-tag.en.vtt" srclang="en" label="English">
  Video tag is not supported in this browser.
</video>

توجه: src همچنین از چندین آهنگ پشتیبانی می کند تا شامل زیرنویس ها شود.

پشتیبانی از مرورگر

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.