معرفی و کاربرد تگ video در HTML درج ویدئو سند html

در این مقاله از سایت آموزی جهت استفاده شما همراهان همیشگی به معرفی و کاربرد تگ <video> در HTML می پردازیم.

تگ <video> در HTML

معرفی و کاربرد تگ video در HTML درج ویدئو سند html - سایت آموزی

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

در حال حاضر،برای تگ <video> مرورگرها از سه فرمت ویدئویی MP4 ،WebM و Ogg پشتیبانی می کنند.

  • MP4: فایل های MPEG 4 با کدک تصویری H264 و کدک صوتی AAC
  • WebM: فایل های WebM با کدک تصویری VP8 و کدک صوتی Vorbis
  • Ogg: فایل های Ogg با کدک تصویری Theora و کدک صوتی Vorbis

انواع MIME برای فرمت های ویدئویی

Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

مثال در مورد تگ <videoدر اچ تی ام ال

[html]<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>[/html]

بررسی تگ <video> در HTML 4.01 و HTML5

تگ <video> یک تگ جدید در HTML5 است. و در HTML4.01 و نسخه های قدیمی تر وجود نداشته است.

خصوصیات ویژه تگ <video> در HTML

خصوصیت مقدار توضیحات
autoplay autoplay در صورتی که وجود داشته باشد ویدئو به محض اینکه آماده شود خود به خود پخش می شود.
controls controls برای افزودن کنترل های play ،pause و صدا بکار برده می شود.
height pixels ارتفاع پخش کننده ویدئو را تنظیم می کند.
loop loop در صورت وجود پس از اتمام نمایش ویدئو پخش آن دوباره شروع می شود.
muted muted مشخص کننده قطع صدا به طور پیش فرض برای ویدئو است.
poster URL مشخص کننده تصویری است که به عنوان پیش نمایش ویدئو از آن استفاده می کند. مقدار آن یک url یا آدرس اینترنتی است.
preload auto
metadata
none
در صورت وجود ویدئو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay وجود داشته باشد این خاصیت نادیده گرفته می شود.
src URL آدرس ویدئویی که باید پخش شود.
width pixels پهنای پخش کننده ویدئو را تنظیم می کند.

ویژگی های عمومی تگ <video> در HTML

تگ <video> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.

رویدادهای عمومی تگ <video> در HTML

تگ <video> از کلیه رویدادهای عمومی در سند HTML پشتیبانی می کند.

پشتیبانی مرورگرها از تگ <video> در اچ تی ام ال

در زیر مرورگرهای معتبر اینترنتی از اولین نسخه هایی که از تگ <video> پشتیبانی می کنند، آمده است:

جهت دیدن تمام ردیف و ستون ها در حالت موبایلی جدول را به چپ و راست اسکرول کنید.

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 پروژه محور

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

معرفی و کاربرد تگ video در HTML درج ویدئو سند html – اختصاصی سایت آموزی